如果位置绝对元素后跟，为什么位置保持不起作用？ [英] Why position sticky is not working if followed by position absolute element?
问题描述
下面是代码片段，如果运行它，可以看到header元素不粘。我看过以下问题。
位置：粘性；无法正常工作的CSS和HTML
和 CSS：当定义了高度时，位置：粘性不起作用
等，但无济于事。
Below is the code snippet and if run it, you can see the header element does not stick. I have looked at the at following questions. "Position: sticky;" not Working CSS and HTML and CSS: 'position: sticky' not working when 'height' is defined among many others but it did not help..
这里是我的代码。
<body style="margin: 0">
<div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
<div>header contents</div>
<div>header contents</div>
</div>
<div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%; background: #ddd;">
<div style="height: 1000px;">
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
</div>
</div>
</body>
我也注意到了如果我从容器div中删除position：absolute，则粘性开始正常工作。任何帮助将不胜感激。
Also I noticed if I remove position: absolute from the container div, the sticky starts to work properly. Any help will be appreciated.
推荐答案
在边框上添加边框将向您显示问题：
Adding border to the body will show you the issue:
<body style="margin: 0;border:2px solid red;">
<div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
<div>header contents</div>
<div>header contents</div>
</div>
<div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%;">
<div style="height: 1000px;">
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
</div>
</div>
</body>
您可以看到身体的高度由粘性元素定义，因此没有粘性行为。如果删除 positon：absolute ，您将使元素成为流的一部分，因此体高会增加，并且会出现粘滞行为
As you can see the height of the body is defined by the sticky element thus there is no sticky behavior. if you remove the positon:absolute you will make the element part of the flow thus the body height will increase and you have a sticky behavior
<body style="margin: 0;border:2px solid red;">
<div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
<div>header contents</div>
<div>header contents</div>
</div>
<div id="container" style=" top: 50px; left: 0px; width: 100%;">
<div style="height: 1000px;">
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
</div>
</div>
</body>
问题不不是 position：absolute 元素，而是粘性元素的包含块的高度（父容器）。这个必须足够大（至少大于粘性元素）才能具有粘性行为。
The issue isn't the position:absolute element but the height of the containing block (parent container) of the sticky element. This one need to be big enough (at least bigger than the sticky element) to have a sticky behavior.
增加身体高度并保持绝对元素也将解决此问题。 ：
Increasing the body height and keeping the absolute element will also fix this:
<body style="margin: 0;border:2px solid red;height:200px;">
<div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
<div>header contents</div>
<div>header contents</div>
</div>
<div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%;">
<div style="height: 1000px;">
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
</div>
</div>
</body>
另一个相关的答案，您可以在其中找到有关粘性如何工作的更多示例：为什么位置为：sticky的元素不起作用？会坚持到底吗？
Another related answer where you can find more examples of how sticky works: Why element with position:sticky doesn't stick to the bottom of parent?
这篇关于如果位置绝对元素后跟，为什么位置保持不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
