关于嵌套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都将消失。