将相对位置元素放在固定位置元素后面

Question

我想将位置button的{​​{1}}放到relative的{​​{1}}后面。 div相对位置的目的是基于我的预览问题的answer。从这个答案中，自定义组合框可以像我期望的那样完美地工作。但是，在显示任何弹出窗口和固定位置元素时，可以访问组合框的按钮。对于这个问题，我在这里附上我的学习代码，

HTML：

postion:fixed

CSS：

button

当前设计：

预期设计：

我该如何解决？预先谢谢你...

Answer 1

添加z-index将设置.sticky及其后代的z顺序。

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background-color: rgb(233, 233, 233);
}

.sticky {
  position: sticky;
  height: 40px;
  width: 100%;
  background-color: orange;
  z-index: 1;
}

.fixed {
  position: fixed;
  margin-top: 40px;
  height: 100%;
  width: 100%;
  background-color: rgba(34, 138, 34, 0.555);
}

.elements {
  background-color: rgb(231, 77, 39);
}

.elements button {
  position: relative;
}

<div class="sticky">
  <div class="fixed">
  </div>
</div>

<div class="elements">
  <button>I should behind this green wall!</button>
</div>