css - 位置：固定是否为 z 索引创建新的堆叠上下文？

Question

z-index 规范没有特别提到position: fixed，但是这个小提琴在 Chrome 24 上对元素进行了不同的排序。设置是否为子元素position: fixed创建了一个新的堆叠上下文？

Answer 1

根据这篇文章，Chrome 22+ 模仿移动 WebKit 的行为并为固定位置元素创建新的堆叠上下文。

Firefox 至少 17 遵循规范并且不会创建新的上下文。

Answer 2

这是一个示例，其中我有两个固定元素，每个元素都有自己的堆叠上下文。我将第二个元素从固定位置切换到相对位置。当第二个元素更改为固定而不指定其 z-index 时，其子元素是一个新的本地堆叠上下文，其父元素的全局 z-index 为 0。因此，更改子元素的 z-index 没有效果，它仍然是被隐藏，尽管它的 z-index 比其他固定元素高。

let fixed = false;
function handleClick() {
  const elem = document.getElementById('toggle');
  const buttonElem = document.querySelector('button');
  if (!fixed) {
    elem.className = 'content--fixed';
    fixed = true
    buttonElem.innerText = 'Remove Fixed';
  } else {
    elem.className = 'content';
    fixed = false;
    buttonElem.innerText = 'Add Fixed';
  }
}

body {
  margin: 0;
  padding: 0;
}

.sidebar {
  position: fixed;
  width: 30%;
  background-color: #ccc;
  min-height: 100vh;
  z-index: 500;
}

.content--fixed {
  left: 30%;
  width: 50vw;
  position: fixed;
}

.content {
  padding-left: 30%;
  position: relative;
}

.hover {
  position: absolute;
  background-color: red;
  color: white;
  width: 400px;
  height: 10vh;
  left: -200px;
  z-index: 600;
}

.content .hover {
  left: 100px;
}

<div class="sidebar">
  Sidebar
</div>
<div id="toggle" class="content">
    <button onclick="handleClick()">Add Fixed</button>
  <div class="hover">
    Hover
  </div>
</div>