我想将 .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>
最佳答案
z-index
应该是 -1 这应该有效:
.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: -1;
}
<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>
</div>
关于CSS:z-index 不能在位置内工作:相对容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48703120/