不使用定位和对齐进行定位的Z索引

Question

我在z索引上遇到了问题。我试图让按钮链接显示在图像上方，但它似乎就是不起作用。下面的图片显示了我想让它看起来是什么样子。

下面是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}