将非固定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

的翻译是：

{{链接1：jsfiddle}}

。

- midknyte

Answer 1

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

注意：z-index仅适用于定位元素（position: absolute、position: relative、position: fixed或position: sticky）。

这与网页中所谓的“堆栈上下文”有关。正如MDN web docs中所指出的那样，堆栈上下文顺序如下：

1. 文档的根元素（）。 2. 具有绝对或相对位置值和z-index值而非auto的元素。 3. 具有固定或粘性（在所有移动浏览器中都是粘性的，但不适用于旧版桌面浏览器）位置值的元素。 4. 是flex（flexbox）容器的子级，并具有z-index值而非auto的元素。 5. 是grid（grid）容器的子级，并具有z-index值而非auto的元素。 6. 具有小于1的不透明度值（请参阅不透明度规范）。 7. 具有混合模式值而非正常的元素。 8. 具有以下任何一个属性且值不为none的元素： transform filter perspective clip-path mask / mask-image / mask-border 9. 具有isolation值隔离的元素。 10. 具有-webkit-overflow-scrolling值触摸的元素。 11. 具有指定任何会在非初始值上创建堆栈上下文的属性的will-change值的元素（请参阅此帖子）。 12. 具有布局、绘制或包含它们之一的组合值（即contain: strict、contain: content）的包含值。

- Felix Lemke