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

資訊專欄INFORMATION COLUMN

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

Kerr1Gan / 3250人閱讀

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

問題描述

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

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




  
  
  Test
  


    
123

    

        
aside

        
main

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

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

問題探究

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

總結(jié)

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

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

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

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

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

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

相關(guān)文章

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

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

    bladefury 評(píng)論0 收藏0

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

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

    RobinTang 評(píng)論0 收藏0

  • CSS 面試題總結(jié)

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

    tomato 評(píng)論0 收藏0

  • CSS3開發(fā)文檔

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

    gplane 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<