如何在最前面的视图中修复div

Question

我遇到了修复div元素并同时在最前面查看的问题。这是项目link。 问题是当我滚动按钮位于绿色div元素的顶部时。我想要的是按钮位于绿色栏下

#header{
  width:100%;
  height:50px;
  background-color: green;
  position: fixed;
}

#btn{
  position: absolute;
  left: 100px;
  top: 100px;
  background-color: red;
}

<div id="header">

</div>

<img src="https://images.unsplash.com/photo-1483638906402-d942f4840969?auto=format&fit=crop&w=1400&q=80">
<button id="btn">
Button
</button>

Answer 1

只需将z-index属性添加到header元素。

＆＃13;

＆＃13;

#header{
  width:100%;
  height:50px;
  background-color: green;
  position: fixed;
  z-index: 999;

}

#btn{
  position: absolute;
  left: 100px;
  top: 100px;
  background-color: red;
}

＆＃13;

<div id="header">

</div>

<img src="https://images.unsplash.com/photo-1483638906402-d942f4840969?auto=format&fit=crop&w=1400&q=80">
<button id="btn">
hello
</button>

＆＃13;

＆＃13;

＆＃13;