Question

我遇到z-index问题。我试图让按钮链接显示图像的顶部，但它似乎似乎不起作用。下图显示了我希望它的外观。

这是HTML：

<div class="featured">
        <img src="images/featured.png" alt="Featured Image">
    <div class="button-2">
        <a href="#">Buy Now</a>
    </div>
</div>

这是CSS：

.featured img
{
    float: left;
    z-index: -1;
}
.button-2
{
    -moz-box-shadow:inset 0px 1px 0px 0px #940c00;
    -webkit-box-shadow:inset 0px 1px 0px 0px #940c00;
    box-shadow:inset 0px 1px 0px 0px #940c00;
    background-color:#8b0101;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0px;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:43px;
    line-height:43px;
    width:135px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #810e05;
    float: left;
}
.button-2 a
{
    color: #fff;
    font-size: 20px;
    letter-spacing: 2px;
}
.button-2:hover 
{
    background-color:#6c0301;
}
.button-2:active 
{
    position:relative;
    top: 1px;
}

这就是显示的内容：http://imgur.com/XungDOU

这就是我想要它做的事：http://imgur.com/XHXTKae

Answer 1

试试这个：

.button-2{
position: absolute;
left:50%;
top:50%;
z-index:99}

Z-index定位不适用于定位和放大对准

1 个答案: