第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何強(qiáng)制 <div> 在滾動(dòng)時(shí)與屏幕頂部保持固定距離？

如何強(qiáng)制 <div> 在滾動(dòng)時(shí)與屏幕頂部保持固定距離？

人到中年有點(diǎn)甜 2023-12-11 16:26:36
我想<div>在網(wǎng)頁(yè)上放置一個(gè)包含較長(zhǎng)文本的元素，頂部間距固定為 30 像素。問(wèn)題是，每當(dāng)我向下滾動(dòng)時(shí)，它們<div>就不會(huì)保持在原位，因此間距就會(huì)消失。我正在尋找僅 CSS 的解決方案。該文檔說(shuō)明了我的問(wèn)題：<!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 回答

?
慕標(biāo)琳琳

TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超9個(gè)贊

所以你是說(shuō)你想在 div 頂部保持 30 像素間距，但仍然希望能夠向下滾動(dòng)？在這種情況下，我認(rèn)為你必須使 div 本身可滾動(dòng)。但既然這不是你想要的，那么div用position:fixed相同的背景顏色覆蓋另一個(gè)怎么樣？


  <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;

}


查看完整回答
反對(duì) 回復(fù) 2023-12-11
?
慕田峪7331174

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊

嘗試這個(gè) css 規(guī)則來(lái)修復(fù)你的<div>.


.yourfixeddiv {

  position: fixed;

  top: 30px;

  width: 100%;

}


查看完整回答
反對(duì) 回復(fù) 2023-12-11
?
慕少森

TA貢獻(xiàn)2019條經(jīng)驗(yàn) 獲得超9個(gè)贊

如果你是絕對(duì)定位的話，你不需要 margin-top。


位置：粘性頂部：50px；應(yīng)該達(dá)到你想要的


div {

  position: sticky;

  top: 50px;

}


查看完整回答
反對(duì) 回復(fù) 2023-12-11
?
慕尼黑8549860

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超11個(gè)贊

position: fixed;是保持元素就位的方法。重要的是使用width. 更多信息請(qǐng)參見(jiàn)：https ://css-tricks.com/almanac/properties/p/position/


查看完整回答
反對(duì) 回復(fù) 2023-12-11
  • 4 回答
  • 0 關(guān)注
  • 247 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)