我想<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 回答
慕标琳琳
TA贡献1830条经验 获得超9个赞
所以你是说你想在 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
TA贡献1828条经验 获得超13个赞
尝试这个 css 规则来修复你的<div>.
.yourfixeddiv {
position: fixed;
top: 30px;
width: 100%;
}
慕少森
TA贡献2019条经验 获得超9个赞
如果你是绝对定位的话，你不需要 margin-top。
位置：粘性顶部：50px；应该达到你想要的
div {
position: sticky;
top: 50px;
}
慕尼黑8549860
TA贡献1818条经验 获得超11个赞
position: fixed;是保持元素就位的方法。重要的是使用width. 更多信息请参见：https ://css-tricks.com/almanac/properties/p/position/
- 4 回答
- 0 关注
- 143 浏览
添加回答
举报
0/150
提交
取消