将按钮放在表格单元格中的图像上方

Question

I have a table cell where an image is the full width and height of the cell. I want to position a button to the top right of the cell on top of the image. I can imagine this can be achieved with CSS.

( Note: I do not wish to use the image as a background image for the cell! )

HTML

<td class="ImageHomeBandCenterArea">

    <img src="/CorporateWebsite/Interface/AdminUploads/MarketingEndImages/TopImageBar_Center.png"
                alt="Center Graphic" />

    <input type="button" value="GET IN TOUCH" class="OrangeImageBannerButton" />

</td>

CSS Styles

.ImageHomeBandCenterArea
{
    width: 1024px;
    vertical-align:top;
}


.OrangeImageBannerButton
{
    background-color:#ed6b1f;
    color:#ffffff;
    padding-left:25px;
    padding-right:25px;
    padding-top:10px;
    padding-bottom:10px;
    font-weight:bold;
    font-size:14px;
    cursor:pointer;
    border:none;    
}

Many thanks in advance for anyone who takes the time to answer this!

Answer 1

Use the CSS property "z-index" for this task. it defines, in which order the elemts are printed on the screen. Also, you might want to use absolute positioning for your button.