Html 如何防止固定定位元素与css中的其他元素重叠？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16950213/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent fixed positioned element overlapping others elements in css?
提问by Rolando
Say I have three divs:
假设我有三个 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;
}
Divs "two" and "three" appear to be overlapped by div "one" because of position fixed.
由于位置固定，div“two”和“three”似乎与div“one”重叠。
1) What is the best way to make it such that they do not overlap?
1）使它们不重叠的最佳方法是什么？
2) What is the best way to make it such that my fixed div takes up 100% of the height, even if the user scrolls down? (like a sidebar, preventing any new divs that i want to run along the same side as divs two and three) Does the best way involve floats for #two and #three?
2) 使我的固定 div 占据 100% 高度的最佳方法是什么，即使用户向下滚动？（就像一个侧边栏，防止我想在与 div 2 和 3 同一侧运行的任何新 div）最好的方法是否涉及 #two 和 #three 的浮点数？
采纳答案by iambriansreed
1:
1：
By adding margin-leftyou can make sure that long fixed div doesn't overlap the others.
通过添加，margin-left您可以确保长固定 div 不会与其他 div 重叠。
#two, #three {
margin-left:20%;
width:80%;
height:500px;
}
2:
2：
Adding the bottom:0px;makes it the height of the window because it expands from the top to the bottom.
添加bottom:0px;使其成为窗口的高度，因为它从顶部扩展到底部。
#one {
position:fixed;
top:0px;
bottom:0px;
left:0px;
width:20%;
}
Note:I also added a flexible width of 20% to the #onediv so that it plays nicely with the other two flexible width divs.
注意：我还为#onediv添加了 20% 的灵活宽度，以便它与其他两个灵活宽度的 div 配合得很好。
Fiddle:http://jsfiddle.net/ZPRLd/
小提琴：http : //jsfiddle.net/ZPRLd/
回答by Chethan Jagannatha Kulkarni
By changing the position from position: fixed;to position: sticky;solved my problem.
通过从改变位置position: fixed;来position: sticky;解决我的问题。
#one{
position: sticky;
}
回答by Jo?o Pimentel Ferreira
You can use the CSS z-indexproperty. It worked fine on me!
您可以使用 CSS z-index属性。它对我很好！
#one{
z-index:0
}
#two, #three{
z-index: 1;
}
Since the z index of #twoand #threeare higher than #one, they will be on top when there is an overlapping. You may select any other integer values, as long as one index is higher than another.
由于z折射率#two和#three比更高#one，他们将在顶部时存在重叠。您可以选择任何其他整数值，只要一个索引高于另一个。
