關於嵌套absolute佈局的padding-bottom問題

流動佈局時

父元素含有50px的padding,因爲子元素溢出,所以padding-bottom沒有表現出來。


但實際上,子元素爲了保證處於父盒子的content之中,已經把父盒子撐開了。只是因爲這裏強制對父盒子設置了高度,所以子元素溢出。      

我們將滾動條拉到底部,可以發現子元素確實仍在父元素的padding之內。

因此可以說:流動佈局時,父元素設置了固定高,子元素如果高於父盒子,它將溢出,但它相當於隱性地將父盒子撐開了,仍然滿足盒模型的規則,只是要通過拖動滾動條才能看出。


父元素relative, 子元素absolute

父元素relative+子元素absolute,子元素脫離了父盒子的文檔流,不設置left和right的話,從頭部開始處於默認的位置(父盒子content的左上角),所以它在padding-top和padding-left之內。它的高度比父盒子大,但不會撐開父盒子,相當於z-index位於父盒子的上層,一直向下鋪展開,與父盒子的padding-bottom沒有關係。


滾動條拖到最下面,也只是讓我們看到子元素的最底部,父元素的盒子依然在原地巋然不動。


注意:IE瀏覽器下,父元素的padding-bottom和子元素的margin-bottom都將消失。





發佈了29 篇原創文章 · 獲贊 9 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章