我想<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 關注
- 233 瀏覽
添加回答
舉報
0/150
提交
取消