CSS z-index不起作用（绝对位置）[重复]

Posted 2023-03-05

【中文标题】CSS z-index不起作用（绝对位置）[重复]

【英文标题】：CSS z-index not working (position absolute) [duplicate]

【发布时间】：2014-01-25 02:50:42

【问题描述】：

我正在尝试使黑色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>

预期结果：

【问题讨论】：

我想知道为什么我的问题（7 年前）已关闭并标记为与 2 年前的另一个问题重复

【参考方案1】：

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

然后，除非我有 z-index 200+，否则后面的 div 不起作用。即使我在每个元素上都有position:relative，但正文默认为z-index，它也不起作用。

希望这对某人有所帮助。

【参考方案2】：

我一直在努力解决这个问题，并且我了解到（感谢this 的帖子）：

不透明度也会影响 z-index

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;

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

【讨论】：

Here on Mozzila developers page你可以找到更多关于堆叠的细节。

【参考方案3】：

我一直在努力弄清楚如何将 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 */

【讨论】：

谢谢你救了我不知道多久......谢谢

@PraveenKumar 乐于助人！

【参考方案4】：

这个怎么样？

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

此时只有黑色块需要有绝对位置。

【参考方案5】：

这是因为 Stacking Context，设置 z-index 将使其也适用于所有子级。

您可以将两个 <div>s 设为兄弟而不是后代。

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

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

【讨论】：

这有助于我在父母中设置 z-index 并且它有效。谢谢

【参考方案6】：

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 保持不变。

【参考方案7】：

删除

z-index:0;

来自.absolute。

Updated fiddle here.

【参考方案8】：

试试这个代码：

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

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

【参考方案9】：

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

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

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