关于嵌套absolute布局的padding-bottom问题

流动布局时

父元素含有50px的padding,因为子元素溢出,所以padding-bottom没有表现出来。

关于嵌套absolute布局的padding-bottom问题

但实际上,子元素为了保证处于父盒子的content之中,已经把父盒子撑开了。只是因为这里强制对父盒子设置了高度,所以子元素溢出。      

我们将滚动条拉到底部,可以发现子元素确实仍在父元素的padding之内。

因此可以说:流动布局时,父元素设置了固定高,子元素如果高于父盒子,它将溢出,但它相当于隐性地将父盒子撑开了,仍然满足盒模型的规则,只是要通过拖动滚动条才能看出。

关于嵌套absolute布局的padding-bottom问题

父元素relative, 子元素absolute

父元素relative+子元素absolute,子元素脱离了父盒子的文档流,不设置left和right的话,从头部开始处于默认的位置(父盒子content的左上角),所以它在padding-top和padding-left之内。它的高度比父盒子大,但不会撑开父盒子,相当于z-index位于父盒子的上层,一直向下铺展开,与父盒子的padding-bottom没有关系。

关于嵌套absolute布局的padding-bottom问题


滚动条拖到最下面,也只是让我们看到子元素的最底部,父元素的盒子依然在原地岿然不动。

关于嵌套absolute布局的padding-bottom问题


注意:IE浏览器下,父元素的padding-bottom和子元素的margin-bottom都将消失。