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

有没有一种方法可以定位一个非固定div，它可以在固定div上滚动页面？我试过z-index，但没用。fixed div内部有一个框，其布局基于父包装的宽度百分比。下面是我的代码和JSFIDLE。我想红色的框固定在蓝色框的下方滚动

HTML

---

简而言之：您需要将

位置：relative

添加到

.bluebox

类中，以将其添加到与固定堆栈相同的堆栈上下文中

说：

注意：z索引仅适用于定位元素（位置：绝对、位置：相对、位置：固定或位置：粘滞）

这与网页中所谓的堆栈上下文相关。如图所示，堆栈上下文顺序如下：

• 文档的根元素（）
• 位置值为绝对或相对且z索引值为非自动的元素
• 元素的位置值固定或粘滞（粘滞适用于所有移动浏览器，但不适用于较旧的桌面）
• 元素，该元素是flex（flexbox）容器的子元素，z索引值不是auto
• 元素，该元素是网格（网格）容器的子元素，z索引值不是“自动”
• 不透明度值小于1的元素（请参见不透明度规范）
• 具有“混合模式”值而非“正常”值的元素
• 元素，该元素具有以下任何属性，其值不是none： 使改变 滤波器 观点 剪辑路径 遮罩/遮罩图像/遮罩边框
• 具有隔离值的元素隔离
• 元素具有-webkit溢出滚动值touch
• 元素将更改值，指定在非初始值上创建堆栈上下文的任何属性（请参阅本文）
• 包含值为layout或paint的元素，或包含其中任何一个的复合值（即包含：strict、包含：content）

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

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

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;
}