在固定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类，以将其添加到与固定类相同的堆栈上下文中。

W3Schools说：

注意：z-index仅适用于定位的元素（位置：绝对，位置：相对，位置：固定或位置：粘性）。

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

• 文档的根元素（）。
• 具有绝对或相对位置值和z索引值而不是auto的元素。
• 具有固定或固定位置值的元素（对于所有移动浏览器均具有粘性，但对于较旧的台式机则为粘性）。
• 是flex（flexbox）容器的子元素，其z-index值不是auto。
• 是作为网格（网格）容器的子元素的元素，其z-index值不是auto。
• 不透明度值小于1的元素（请参见不透明度的说明）。
• 具有非正常混合混合模式值的元素。
• 具有以下任何一个属性的元素，其值均为none：转变过滤透视剪切路径遮罩/遮罩图像/遮罩边框
• 具有隔离值isolate的元素。
• 具有-webkit-overflow-scrolling值元素的元素。
• 具有遗嘱更改值的元素，该属性指定将在非初始值上创建堆栈上下文的任何属性（请参阅此帖子。）>
• [包含布局或绘画的包含值的元素，或包含两者之一的复合值（即，包含：严格，包含：内容）。