将非固定 div 置于固定 div 之上？

Question

有没有办法将随页面滚动的非固定 div 定位在固定 div 上方？我试过 z-index 但这不起作用。固定 div 内部有一个框，其布局基于父包装器的宽度百分比。下面是我的代码和 jsfiddle。我希望固定的红色框在滚动的蓝色框下方。

HTML

<div class="holder">
  <div class="wrapper">
    <div class="redbox">
      <p>
      red box
      </p>
    </div>
  </div>
</div>

<div class="bluebox">
  <p>
  blue box
</div>

CSS

body, html {
  height: 1000px;
  margin: 0;
  padding: 0;
}

.holder {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.wrapper {
  width: 80%;
  margin: 50px auto 0 auto;
}

.redbox {
  width: 100px;
  height: 100px;
  background: red;
}

.bluebox {
  width: 500px;
  height: 500px;
  margin: 75px 0 0 0;
  background: blue;
}

jsfiddle

Answer 1

简而言之：您需要将 position: relative 添加到 .bluebox class，以将其添加到与固定的相同的堆栈上下文。

W3Schools 说：

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

这与网页中所谓的stack-context有关。如 MDN web docs 中所述，堆栈上下文顺序为：

文档的根元素 ()。
具有绝对或相对位置值且 z-index 值不是自动的元素。
具有固定或粘性位置值的元素（粘性适用于所有移动浏览器，但不适用于旧版桌面）。
作为 flex（flexbox）容器子元素的元素，其 z-index 值不是 auto。
网格（网格）容器的子元素，z-index 值不是自动。
不透明度值小于 1 的元素（参见不透明度规范）。
混合混合模式值不是正常值的元素。
具有以下任何属性且值不是 none 的元素：转变筛选看法剪辑路径掩码/掩码图像/掩码边框
具有隔离值 isolate 的元素。
具有 -webkit-overflow-scrolling 值 touch 的元素。
具有将更改值的元素，指定任何属性将在非初始值上创建堆栈上下文（参见此 post）。
包含布局或绘画值的元素，或包含其中任何一个的复合值（即包含：严格，包含：内容）。

将非固定 div 置于固定 div 之上？

Position a non-fixed div above a fixed div?

html

css

z-index