如何在CSS中避免固定定位元素与其他元素重叠？

Question

假设我有三个

元素：

<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沿着与divs two和three相同的侧面运行）最好的方法是否涉及#two和#three的浮动？

- Rolando

---

你能不能不用为每个 div 单独指定 "top" 属性？ - Learner

不，我希望它们自然而然地不重叠在彼此之上。（针对divs two和three） - Rolando

我想让固定的div在用户向下滚动页面时保持不变，而#two和#three div则始终保持在#one的右侧，无论其中包含什么内容。在我使用固定定位之前，我会将two和three浮动到左侧。但是似乎随着#one被设置为position:fixed，它变得混乱了。如果可能的话，我更喜欢同时使用fixed和float:left。如果不行，只要保持所需的行为（无需为#two和#three声明tops、position absolute等），无论采用何种最佳方法都可以。 - Rolando

100%高度与绝对定位的显示很简单，只需使用top:0;bottom:0;即可。 - RaphaelDDL

@RaphaelDDL 如果你指的是 #one，它不会随着页面滚动，这正是我想要的。 - Rolando

Answer 1

将位置从position: fixed;更改为position: sticky;解决了我的问题。

#one{
 position: sticky;    
}

- Chetan J Rao

---

当前支持 sticky 的浏览器：https://caniuse.com/#feat=css-sticky - David Gay

谢谢您的回答，解决了我的问题。能否再多解释一些？ - Francois

这里有一个很好的解释为什么它能够工作: https://dev59.com/v2Ik5IYBdhLWcg3wMLiI#65240437 - Green

Answer 2

1:

通过添加margin-left，你可以确保长的固定

不会重叠在其他元素上。

#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协调一致。

Fiddle: http://jsfiddle.net/ZPRLd/

- iambriansreed

Answer 3

你可以使用CSS z-index属性。这对我很有效！

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

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

- João Pimentel Ferreira

Answer 4

这个问题目前无法解决，我们只能等待...

以后再感谢我吧

- user16537394

---

你好，user16537394，欢迎来到stackoverflow。首先，请检查帖子是否有被采纳的答案。其次，请不要在提问时过度，即使问题无法解决，请提供一个链接进行参考。这样做可以让其他人回答同一个问题。谢谢。 - Cafer Yükseloğlu