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

时间:2014-02-28 11:04:41

标签: html css html5

我有一个表格单元格,其中图像是单元格的全宽和高度。我想将一个按钮放在图像顶部的单元格的右上角。我可以想象这可以用CSS实现。

注意:我不希望将图像用作单元格的背景图像!

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样式

.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;    
}

非常感谢任何花时间回答这个问题的人!

1 个答案:

答案 0 :(得分:1)

使用CSS属性“z-index”执行此任务。它定义了按顺序将元素打印在屏幕上。此外,您可能希望对按钮使用绝对定位。