如何防止固定定位元素与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"two"和"three"似乎与div"one"重叠.

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

2)即使用户向下滚动,最好的方法是使我的固定div占据高度的100%？(就像一个侧边栏,防止我想要在div和div两个同一侧运行的任何新div)最好的方法是涉及#two和#three的浮动？

Answer 1

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

注意:我还为#onediv 添加了20%的灵活宽度,以便与其他两个灵活的宽度div完美匹配.

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

Answer 2

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

#one{
 position: sticky;    
}

Answer 3

您可以使用 CSS z-index属性。对我来说效果很好！

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

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