我想要将.wall-panel
div
放在我的img
后面(让图像可见),但保留fiddle中的所有其他定位。如果没有position: relative
容器,这个方法是可行的,但一旦放到容器内部,z-index
属性似乎就不起作用了。
我做错了什么?
.container {
position: relative;
top: calc(100vh * 0.4);
left: 0;
width: 100%;
}
.image {
z-index: 1;
}
.wall-panel {
width: 100%;
background-color: red;
height: 200px;
position: absolute;
top: 0;
z-index: 0;
}
<div class='container'>
<img class='image' src='http://lorempixel.com/400/400/'>
<div class='wall-panel' />
</div>
<div>
Some other text that positions under the container.
</div>