較高的z-index不會更改堆疊順序

Question

我正在嘗試做的是，當用戶將鼠標懸停在圖像上時，圖像應沿x軸重新定位，並且應顯示.content 。 我已將z-index: 10為圖像，將z-index: 1為.content以使.content位於圖像下方。 但是.content仍然保留在圖像頂部。 請幫我..

這是我的代碼 ：

html

<div class="holder">
    <img src="http://placehold.it/350x150" />
    <div class="content">
        <h3>hello there</h3>    
        <a href="#">view more</a>        
    <div/>        
</div>

的CSS

.holder {
    margin-top: 130px;
    position: relative;
}
img {    
    display: block;
    transition: -webkit-transform 0.5s;
    transition: -moz-transform 0.5s;
    z-index: 10;
}
.content {
    background: blue;
    height: 100%;
    color: white;
    z-index: 1;
    position: absolute;
    top: auto;
    bottom: 0;
}
a {
    color: white;
    background: red;
    padding: 10px;
}

.holder:hover img {
    -webkit-transform: translateX(90px);
    -moz-transform: translateX(90px);
}

Answer 1

在這里，我感謝Jones G. Drange糾正了我的代碼問題。 正如他在評論中指出的那樣：“只能在位置非靜態的元素中修改z-index。您的img的位置為：默認情況下為靜態”

jsfiddle

img {    
    position: relative;
}