在 Chrome 中使用“z-index”的固定父元素下的元素

Posted 2023-03-05

【中文标题】在 Chrome 中使用“z-index”的固定父元素下的元素

【英文标题】：Element under its fixed parent using `z-index` in Chrome

【发布时间】：2015-10-03 15:03:36

【问题描述】：

我想要一个元素 (div) 在其固定父级 (header) 下分层：

header 
  position: fixed;
  width: 100%;
  height: 100px;
  
  background-color: #ccc;

header > div 
  position: absolute;
  height: 100%;
  width: 100px;
  z-index: -1;
  
  transform: translateY(50%);
  background-color: #aaa;

<header>
  <div>
  </div>
</header>

这适用于 Firefox，但不适用于 Chrome。要修复它，您需要这样做：

header 
  position: fixed;
  width: 100%;
  height: 100px;

header > div 
  position: relative;
  width: 100%;
  height: 100%;
  
  background-color: #ccc;

header > div > div 
  position: absolute;
  height: 100%;
  width: 100px;
  z-index: -1;

  transform: translateY(50%);
  background-color: #aaa;

<header>
  <div>
    <div>
    </div>
  </div>
</header>

但这很糟糕！ 根据 Firefox 或 Chrome 的规范，谁错了？有没有更好的方法来跨浏览器完成这项工作？

【问题讨论】：

Chrome: can't position one absolute div over another when the parent is fixed的可能重复

【参考方案1】：

试试这个，

header 
  position: fixed;
  width: 100%;
  height: 100px;
  background-color: #ccc;
  overflow: hidden;

header > div 
  height: 100%;
  z-index: -1;
  transform: translateY(50%);
  background-color: #aaa;
  overflow: hidden;

<header>
   <div></div>
</header>

好像我误解了你的问题。无论如何，答案是铬是正确的。我认为更好的解决方案是使用相同的二级 DIV（如果可能）。

header 
  position: fixed;
  width: 100%;
  overflow: hidden;
  

header .header-inner 
  position: relative;
  height: 100px;
  width: 100%;
  z-index: 1;
  background-color: #ccc;


header .under-layer 
  position: absolute;
  height: 100%;
  z-index: -1;
  transform: translateY(50%);
  background-color: #aaa;
  overflow: hidden;
  top: 0px;
  width: 100%;

<header>
  <div class="header-inner"></div>
  <div class="under-layer"></div>
</header>

【讨论】：

我想你误会了：overflow: hidden 隐藏元素，只要它（部分）在其父元素之外。但我希望它与我发布的示例完全相同。所以这个答案可能只对 chrome 是正确的；因此，您可以参考标准吗？

【参考方案2】：

当一个元素有位置时：一个新的上下文被创建，这意味着div 相对于window 上下文。所以你的 div 不能被 z-indexly 放置在 header 上。

您必须为此使用解决方法。

【参考方案3】：

如果您需要“定位”您的标题，您可以将其包装在一个 div 中：

<div class="test">
<header>
  <div>
  </div>
</header>
</div>

改为将position: fixed; 应用于此 div。这将为 div 创建一个stacking context。

.test 
  position: fixed;
  width: 100%;
  height: 100px;

然后您可以将z-index: -1; 应用到header > div，因为它将与其父级（标题）共享div.test 的stacking context。

header 
  width: 100%;
  height: 100%;
  background-color: #ccc;


header > div 
  position: absolute;
  height: 100%;
  width: 100px;
  z-index: -1;

  transform: translateY(50%);
  background-color: #aaa;

.test 
  position: fixed;
  width: 100%;
  height: 100px;


header 
  width: 100%;
  height: 100%;
  background-color: #ccc;


header>div 
  position: absolute;
  height: 100%;
  width: 100px;
  z-index: -1;
  transform: translateY(50%);
  background-color: #aaa;

<div class="test">
  <header>
    <div>
    </div>
  </header>
</div>