html-CSS z-index不起作用(绝对位置)

我正在尝试使黑色2604225233938809809856(相对)高于第二个黄色(绝对值)。 黑色div的父代也具有绝对位置。

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

预期结果:

enter image description here

HTMHell asked 2019-11-07T21:20:43Z
9个解决方案
41 votes

去掉

z-index:0;

.absolute

在这里更新了小提琴。

Hiral answered 2019-11-07T21:21:09Z
31 votes

这是由于Stacking Context,设置z-index也会使其同样适用于所有子级。

您可以使两个2604226316119573573s的兄弟姐妹代替后代。

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

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

xec answered 2019-11-07T21:21:46Z
8 votes

我在这个问题上苦苦挣扎,(由于这篇文章)我了解到:

不透明度也会影响z-index

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

Mohamed Ramrami answered 2019-11-07T21:22:25Z
2 votes

我正在努力弄清楚如何在这样的图像上放置div:z-index working

无论我如何在div(图像包装器)和本节中都配置z-index,我都可以这样做:

z-index Not working

原来我没有将本节的背景设置为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 */
}
juliangonzalez answered 2019-11-07T21:23:09Z
1 votes

只需在另一个.second div之前添加第二个.absolute div即可:

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

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

edonbajrami answered 2019-11-07T21:23:39Z
0 votes

试试这个代码:

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

}

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

Manoj answered 2019-11-07T21:24:10Z
0 votes

的jsfiddle

您必须将第二个div放在第一个div的上方,因为两个div的z索引均为零,以便dom的顺序决定哪个位于最上面。 这也影响相对定位的div,因为其z索引与父div内的元素有关。

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

CSS保持不变。

Markus Kottländer answered 2019-11-07T21:24:43Z
0 votes

这个怎么样?

[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具有正常的定位。

这样,只有黑色块需要具有绝对位置。

Rasmus Stougaard answered 2019-11-07T21:25:22Z
0 votes

我通过制作主体包装器z-index和主体position:relative,以及其他div z-index解决了z-index问题。

然后,除非我有z-index 200+,否则以后的div不会起作用。 即使我在每个元素上都有position:relative,但主体默认为z-index,也无法正常工作。

希望这对某人有帮助。

ax.falcon answered 2019-11-07T21:26:01Z
translate from https://stackoverflow.com:/questions/20971340/css-z-index-not-working-position-absolute