如何强制 <div> 在滚动时与屏幕顶部保持固定距离？
我想<div>在网页上放置一个包含较长文本的元素，顶部间距固定为 30 像素。问题是，每当我向下滚动时，它们<div>就不会保持在原位，因此间距就会消失。我正在寻找仅 CSS 的解决方案。
该文档说明了我的问题：
<!DOCTYPE html>
<html>
<body>
<div style = "width: 10px; top: 50px; margin-top: 50px; padding-top: 50px;
position: absolute;">
text to enable scrolling.
text to enable scrolling.
text to enable scrolling.
text to enable scrolling.
text to enable scrolling.
text to enable scrolling.
text to enable scrolling.
text to enable scrolling.
text to enable scrolling.
text to enable scrolling.
text to enable scrolling.
text to enable scrolling.
text to enable scrolling.
text to enable scrolling.
text to enable scrolling.
</div>
</body>
</html>
人到中年有点甜4回答
-
慕标琳琳
所以你是说你想在 div 顶部保持 30 像素间距，但仍然希望能够向下滚动？在这种情况下，我认为你必须使 div 本身可滚动。但既然这不是你想要的，那么div用position:fixed相同的背景颜色覆盖另一个怎么样？ <body> <div class="overlay"></div> <div class="content"> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> text to enable scrolling.<br> </div> </body>body { margin: 0; padding: 0; position: relative; width: 100%; height: 100%;}.content { position: relative; padding-top: 50px; z-index: 1000; background: white; width: 300px;}.overlay { position: fixed; height: 50px; width: 100%; z-index: 2000; background: white;} -
慕田峪7331174
尝试这个 css 规则来修复你的<div>..yourfixeddiv { position: fixed; top: 30px; width: 100%;} -
慕少森
如果你是绝对定位的话，你不需要 margin-top。位置：粘性顶部：50px；应该达到你想要的div { position: sticky; top: 50px;} -
慕尼黑8549860
position: fixed;是保持元素就位的方法。重要的是使用width. 更多信息请参见：https ://css-tricks.com/almanac/properties/p/position/
随时随地看视频慕课网APP
相关分类
Html5