国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS 同級元素position:fixed和margin-top共同使用的問題

Kerr1Gan / 3240人閱讀

摘要：同時設(shè)置和仍會空出的距離。給設(shè)置，如不受和的布局影響。之后補充詳細的測試代碼和效果圖總結(jié)歸根結(jié)底是塌陷問題對的影響。給設(shè)置，顏色和背景色一致。給設(shè)置，這種會導(dǎo)致的滾動條消失。名字和盒模型重啦待改不懂不懂塌陷塌陷問題的現(xiàn)象與解決

問題描述

想用CSS實現(xiàn)頂部固定的效果：

嘗試margin-top加position:fixed實現(xiàn)，代碼如下：




  
  
  Test
  


    
123

    

        
aside

        
main

結(jié)果header沒有定位在頂部，而是空出了content的margin-top距離：

按照position:fixed的定義，header已經(jīng)脫離文檔流，應(yīng)該不會受到content布局影響，但結(jié)果并非如此。

問題探究

1.content的margin-top改為padding-top：可實現(xiàn)預(yù)期效果。
2.content同時設(shè)置margin-top和padding-top：仍會空出margin-top的距離。
3.body設(shè)置padding-top：會空出body的padding-top的距離，可實現(xiàn)預(yù)期效果。
4.body設(shè)置margin-top：會空出max(body->margin-top,content->margin-top)的距離。
5.給header設(shè)置top，如top: 0;：不受body和content的布局影響。
TBD：之后補充詳細的測試代碼和效果圖(￣?￣)...

總結(jié)

歸根結(jié)底是margin-top塌陷問題對position:fixed的影響。首先，對于position:fixed元素，如果不指定top，它在垂直方向上的參考原點是body盒模型的content的上邊界。如果指定top，它在垂直方向上的參考原點才是我們常說的視窗(viewport)的上邊界，left和水平方向同理。這里的參考原點是指fixed元素布局時的參考對象，一旦確定，即便頁面被下拉，body上邊界上移，fixed元素位置也不再改變。其次，因為margin-top塌陷問題，設(shè)置content的margin-top后，body的content部分會下移，即參考原點下移，所以fixed元素會空出margin-top的距離。

所以，可以從兩方面解決這個問題：
1.將參考原點改為視窗：給fixed元素設(shè)置top。
2.解決margin-top塌陷問題，更多方法見下方鏈接：
1）給body設(shè)置padding-top。
2）給body設(shè)置border，border顏色和背景色一致。
3）給body設(shè)置position:fixed，這種會導(dǎo)致body的滾動條消失。

先將就看著呀～忙過這陣來完善(允悲)(允悲)。。。
TBD：content名字和盒模型content重啦待改...

不懂position:fixed？=> position|MDN
不懂margin-top塌陷？=> margin-top塌陷問題的現(xiàn)象與解決

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113931.html

相關(guān)文章

  • 徹底理解z-index，看完還是只會無厘頭的設(shè)置9999你打我~~~~

    摘要：如果同級父元素不是層疊上下文元素就不需要看父元素的眼色了文章到這里就結(jié)束了，希望看完這篇文章的同學可以徹底理解。 今天寫代碼用antd-mobile的checkbox時候，想在內(nèi)容文本后面添加一個icon，并且需要對這個icon綁定事件，發(fā)現(xiàn)綁定之后怎么也點不中，調(diào)試發(fā)現(xiàn)原來被層層嵌套的dom元素蓋住了，肯定是z-index在作祟。可是按照我之前對z-index的了解（自信滿滿）卻怎么...

    bladefury 評論0 收藏0

  • 徹底理解z-index，看完還是只會無厘頭的設(shè)置9999你打我~~~~

    摘要：如果同級父元素不是層疊上下文元素就不需要看父元素的眼色了文章到這里就結(jié)束了，希望看完這篇文章的同學可以徹底理解。 今天寫代碼用antd-mobile的checkbox時候，想在內(nèi)容文本后面添加一個icon，并且需要對這個icon綁定事件，發(fā)現(xiàn)綁定之后怎么也點不中，調(diào)試發(fā)現(xiàn)原來被層層嵌套的dom元素蓋住了，肯定是z-index在作祟。可是按照我之前對z-index的了解（自信滿滿）卻怎么...

    RobinTang 評論0 收藏0

  • CSS 面試題總結(jié)

    摘要：而名作為標簽的身份則是唯一的，在頁面中只能出現(xiàn)一次。會導(dǎo)致父容器高度塌陷。堆疊順序由元素在文檔中的先后位置決定，后出現(xiàn)的會在上面。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現(xiàn)清除浮動。 CSS 中類 (classes) 和 ID 的區(qū)別。 書寫上的差別：class名用.號開頭來定義，id名用#號開頭來定義； 優(yōu)先級不同（權(quán)重不同） 調(diào)用上的...

    tomato 評論0 收藏0

  • CSS3開發(fā)文檔

    摘要：站點前端開發(fā)文檔原文選擇器原文繼承屬性原文核心模塊原文盒子模型原文背景圖像原文清除浮動原文定位選擇器并集對選擇器進行分組，被分組的選擇器可以分享相同的聲明。用逗號將需要分組的選擇器開分。 站點：前端開發(fā)文檔原文：CSS選擇器原文：CSS繼承屬性原文：CSS3核心模塊原文：CSS盒子模型原文：CSS背景圖像原文：CSS清除浮動原文：CSS定位 CSS選擇器 并集：對選擇器進行分組，...

    gplane 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<