Question

我想将.wall-panel div置于img后面（以便图片可见），但保留小提琴中的所有其他位置。这可以在没有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>

Answer 1

使图像定位，因为：

z-index CSS属性指定定位的z顺序元素及其后代

^{https://developer.mozilla.org/en-US/docs/Web/CSS/z-index}

和

定位元素是计算出的位置值为的元素相对，绝对，已修复或粘性。（换句话说，就是这样除静电以外的任何东西。）

^{https://developer.mozilla.org/en-US/docs/Web/CSS/position}

.container {
  position: relative;
  top: calc(100vh * 0.4);
  left: 0;
  width: 100%;
}

.image {
  z-index: 1;
  position: relative;
}

.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>
<div>
  Some other text that positions under the container.
</div>

Answer 2

z-index应为-1，这应该有效：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

简单地应用位置：相对于图像。它会起作用。

Answer 4

如果您想使用z-index，则必须将position: relative添加到您的区块中。

请参阅jsfiddle https://jsfiddle.net/andrewsilent/ber9weqw/

CSS：z-index不在位置内工作：相对容器

4 个答案: