Absolute positioning within a table cell.

by audetwebdesign

HTML

<br />
<table id="pridat_fotky">
    <tbody>
        <tr>
            <td class="empty">
                <div>
                    <button>X</button>
                </div>
            </td>
            <td class="empty"></td>
            <td class="empty"></td>
            <td class="empty"></td>
        </tr>
        <tr>
            <td class="empty"></td>
            <td class="empty"></td>
            <td class="empty"></td>
            <td class="empty"></td>
        </tr>
    </tbody>
</table>

CSS

table#pridat_fotky {
    border: 1px solid blue;
}
table#pridat_fotky td {
    width: 100px;
    height: 100px;
    border: 2px solid grey;
    background-repeat: no-repeat;
}
table#pridat_fotky td div {
    /**TO MAKE THE BUTTON APPEAR RELATIVE?**/
    position: relative;
    height: 100%;
}
/**THE BUTTON**/
 table#pridat_fotky td button {
    position: absolute;
    background-color: red;
    font-size: 0px;
    border-style: none;
    border-width: 0px;
    width: 10px;
    height: 10px;
    top: 0px;
    left: 50%;
    margin-left: -5px; /* if you want perfect centering of the button */
}
table#pridat_fotky {
    margin-left: 20px;
    border-spacing: 10px 2px;
}
table#pridat_fotky td.empty {
    background-image: url("http://u8.8u.cz/starozitnosti/images/no_pic_available.jpg");
    background-color: #AAA;
    background-position: 0 0;
    background-size: 100% 100%;
}
table#pridat_fotky td.empty.error {
    background-image: url("http://u8.8u.cz/starozitnosti/images/no_pic_error.png");
}
table#pridat_fotky td.image {
    background-image: url("http://u8.8u.cz/starozitnosti/ok.svg");
    background-size: contain;
    background-position: center center;
}