不透明度也会影响z-index

Question

我试图使黑色div（相对）高于第二个黄色（绝对）。黑人div的父母也有绝对的位置。

代码：

#relative {
	position: relative;
	width: 40px;
	height: 100px;
	background: #000;
	z-index: 1;
	margin-top: 30px;
}
.absolute {
	position: absolute;
	top: 0; left: 0;
	width: 200px;
	height: 50px;
	background: yellow;
	z-index: 0;
}

<div class="absolute">
    <div id="relative"></div>
</div>
<div class="absolute" style="top: 54px"></div>

预期结果：

Answer 1

删除

z-index:0;

来自.absolute。

Updated fiddle here.

Answer 2

这是因为Stacking Context，设置z-index也会使它适用于所有孩子。

你可以让两个<div>的兄弟姐妹而不是后代。

<div class="absolute"></div>
<div id="relative"></div>

http://jsfiddle.net/P7c9q/3/

Answer 3

我正在努力解决这个问题，并且我（通过this帖子）了解到：

不透明度也会影响z-index

＆＃13;

div:first-child {
  opacity: .99; 
}

.red, .green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}

.red {
  z-index: 1;
  top: 20px;
  left: 20px;
  background: red;
}

.green {
  top: 60px;
  left: 60px;
  background: green;
}

.blue {
  top: 100px;
  left: 100px;
  background: blue;
}

＆＃13;

<div>
  <span class="red">Red</span>
</div>
<div>
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>

＆＃13;

Answer 4

我正在努力弄清楚如何将div放在这样的图像上：

无论我如何在两个div（图像包装器）和我得到的部分中配置z-index：

原来我没有将该部分的背景设置为background: white;

所以基本上就是这样：

<div class="img-wrp">
  <img src="myimage.svg"/>
</div>
<section>
 <other content>
</section>

section{
  position: relative;
  background: white; /* THIS IS THE IMPORTANT PART NOT TO FORGET */
}
.img-wrp{
  position: absolute;
  z-index: -1; /* also worked with 0 but just to be sure */
}

Answer 5

只需在另一个.second div：

之前添加第二个.absolute div

<div class="absolute" style="top: 54px"></div>
<div class="absolute">
    <div id="relative"></div>
</div>

因为这两个元素的索引为0。

Answer 6

试试这段代码：

.absolute {
    position: absolute;
    top: 0; left: 0;
    width: 200px;
    height: 50px;
    background: yellow;

}

http://jsfiddle.net/manojmcet/ks7ds/

Answer 7

JSFiddle

你必须将第二个div放在第一个div之上，因为它们的z-index为零，因此dom中的顺序将决定哪个位于顶部。这也会影响相对定位div，因为它的z-index与父div中的元素相关。

<div class="absolute" style="top: 54px"></div>
<div class="absolute">
    <div id="relative"></div>
</div>

Css保持不变。

Answer 8

这个怎么样？

http://jsfiddle.net/P7c9q/4/

<div class="relative">
  <div class="yellow-div"></div>
  <div class="yellow-div"></div>
  <div class="absolute"></div>
</div>

.relative{
position:relative;
}

.absolute {
position:absolute;
width: 40px;
height: 100px;
background: #000;
z-index: 1;
top:30px;
left:0px;
}
.yellow-div {
position:relative;
width: 200px;
height: 50px;
background: yellow;
margin-bottom:4px;
z-index:0;
}

使用相对div作为包装器，让黄色div具有正常定位。

然后只有黑色块需要有一个绝对位置。

Answer 9

我通过制作身体包装z-index和身体z-index:-1以及其他div z-index:-2解决了我的z-index:1问题。

然后后来的div不起作用，除非我有z-index 200+。即使我在每个元素上都有position:relative，但身体处于默认z-index状态，它也无效。

希望这有助于某人。

CSS z-index不起作用（绝对位置）

9 个答案:

不透明度也会影响z-index