html - 较高的 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;
}