代码之家 › 专栏 › 技术社区 › cary

z索引堆栈工作不正常[重复]

css html

cary · 技术社区 · 7 年前

#twitter{
  width:50px;
  height:50px;
  position: absolute;
  right: 0%;
  bottom: 0%;
  background-color: orange; 
  z-index:-2;
}

#socialButton {
  position: relative;
  width: 80px;
  height: 80px;
  background-color: green;
  z-index: 2;
}

#socialButtonRoot {
  width: 100px;
  height: 100px;
  top:20%;
  left:20%;
  position: absolute;
  background-color: hotpink;
  z-index: 5;
}

<div id="socialButtonRoot">
  <div id="socialButton">
    <div id="twitter"></div>
  </div>
</div>

这是一个简化的版本。

在我的react项目中,组件创建了一些Dom节点,之后我在CSS文件中为它们设置了样式,大多数样式工作正常,但只有z-index样式不工作,人们说我们应该设置位置,是的,我已经设置了所有样式,但仍然不工作。所以我认为这可能与React或JS有关,但是在我从React和JS中提取代码并在jsfiddle上测试之后,z-index仍然不起作用。然后,我将z-index值从2更改为“2”(字符串),它可以工作,但我可以在chrome的调试控制台中看到值“2”无效。

前面的div socialButton应该是z-index(5)最高的,中间的div socialButton应该是z-index(2)第二高的,后面的div twitter应该是z-index最低的。

但在下面的结果中,它显示,前面是div twitter,中间是div socialButton,后面是div socialButton,这是不对的。

这里有什么问题?

2 回复 | 直到 7 年前

Quentin 7 年前

见 The Stacking Context on MDN .

在以下场景中,文档中的任何位置都由任何元素构成堆叠上下文:位置值为“绝对”或“相对”且z索引值不是“自动”的元素。

â¦

在堆栈上下文中,子元素按照前面解释的相同规则进行堆栈。重要的是,其子堆栈上下文的z索引值仅在此父上下文中有意义。在父堆栈上下文中,堆栈上下文被原子地视为单个单元。

这个 z-index 将元素放置在其关联的堆栈上下文中。

给出元素 position: absolute 或 position: relative 建立新的堆叠上下文。

因此 #twitter 位于三维框中,表示为 #socialButton .

这个 z-索引 是为了那个盒子,而不是整个文件。

(和 #社交按钮 在里面 #socialButtonRoot 以同样的方式)。

如果要在B下面呈现A,则:

不要 position 一个或
不要让B成为a的后代

Wais Kamal 7 年前

将元素放在另一个元素中时,子元素将显示在其父元素的顶部。这对于许多嵌套元素都是一样的,并且是默认的CSS行为。即使为父元素设置比子元素更高的z索引也不会更改结果。在您的示例中:

<div id="socialButtonRoot">
  <div id="socialButton">
    <div id="twitter"></div>
  </div>
</div>

#socialButtonRoot 将显示在底部。 #socialButton 将显示在 #socialBuuttonRoot . 最重要的是, #twitter 将显示。这个 z-index 将被忽略,因为它只影响同一级别的元素。

我建议你创建一个家长 <div> 把三个都放进去 <分区> s内部:

#parent {
  position: relative;
  width: 100px;
  height: 100px;
  margin-top: 20vh;
  margin-left: 20vw;
}

#socialButtonRoot {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 5;
  background-color: hotpink;
}

#socialButton {
  position: relative;
  width: 80px;
  height: 80px;
  z-index: 2;
  background-color: green;
}

#twitter {
  position: absolute;
  width: 50px;
  height: 50px;
  right: 20%;
  bottom: 20%;
  background-color: orange;
  z-index: -2;
}

<div id="parent">
  <div id="socialButtonRoot"></div>
  <div id="socialButton"></div>
  <div id="twitter"></div>
</div>

我用过 position:relative 为父母 <分区> 这样我就能给孩子们定位 <分区> 使用百分比。我也用过 margin-top 和 margin-left 而不是 top 和 left 因为后者不适用于相对定位的元素。

自从 #社交按钮根 是最大的 <分区> 并且放在其他两个前面,这是运行代码段时出现的唯一一个。你可以改变 z-索引 为每个人 <分区> 如你所愿