如何防止固定定位元素与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%; 
}

注意：我还为#one div添加了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和#three的z索引高于#one，因此在重叠时它们将位于顶部。您可以选择任何其他整数值，只要一个索引高于另一个。

Answer 4

没有办法解决这个问题，所以我们只能等待......

稍后谢谢我