html - 如何防止固定定位元素与css中的其他元素重叠？

Question

假设我有三个 div：

<div id="outer"></div>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

#one {
  position:fixed;
  top:0px;
  left:0px;
}

#two {
  width: 80%;
  height:500px;
}

#three {
  width: 80%;
  height:500px;
}

由于位置固定，div“二”和“三”似乎与 div“一”重叠。

1）使它们不重叠的最佳方法是什么？

2）即使用户向下滚动，我的固定 div 占据 100% 的高度的最佳方法是什么？（就像一个侧边栏，防止我想与 div 2 和 3 在同一侧运行的任何新 div） 最好的方法是否涉及 #two 和 #three 的浮动？

Answer 1

通过改变位置position: fixed;来position: sticky;解决我的问题。

#one{
 position: sticky;    
}

Answer 2

1：

通过添加margin-left，您可以确保长固定 div 不会与其他 div 重叠。

#two, #three {
    margin-left:20%;
    width:80%;
    height:500px;
}

2：

添加bottom:0px;使其成为窗口的高度，因为它从顶部扩展到底部。

#one {    
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;   
    width:20%; 
}

注意：我还为 div 添加了 20% 的灵活宽度，#one以便它与其他两个灵活宽度的 div 配合得很好。

小提琴：http: //jsfiddle.net/ZPRLd/

Answer 3

您可以使用 CSS z-index属性。它对我很好！

#one{
  z-index:0
}
#two, #three{
  z-index: 1;
}

由于 和 的 z 索引#two高于#three，#one因此当存在重叠时，它们将位于顶部。您可以选择任何其他整数值，只要一个索引高于另一个索引即可。

Answer 4

没有办法解决这个问题，所以我们现在能做的就是等待......

晚点再谢我