Z-index与定位不起作用的定位和对齐

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}