position：fixed是否为z-indices创建了新的堆叠上下文？

Question

z-index spec没有特别提到position: fixed，但this fiddle在Chrome 24上以不同的顺序排列元素。设置position: fixed是否会为子项创建新的stacking context元素？

Answer 1

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

Firefox至少有17个遵循规范，并没有创建新的上下文。

Answer 2

这里是一个示例，其中我有两个固定元素，每个元素都有自己的堆栈上下文。我将第二个元素从固定位置切换到相对位置。当第二个元素更改为fixed而未指定其z-index时，其子级为新的本地堆栈上下文，其父级的全局z-index为0。因此，更改子级的z-index无效，并且将其保留为被隐藏，尽管它的z索引比其他固定元素高。

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>