CSS中绝对定位解释

w3school中有这样一句话“绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块”

什么是已定位的祖先元素,经查阅资料及测试,已定位的祖先元素就是有position属性,且position的值为absolute或者relative的父元素。

什么是最初的包含块,即html画布(看起来也就是body区域)。


之前遇到一个问题,两个div嵌套,怎么使第二个div总是在第一个div的底部并且居中?

要在底部就用到了绝对定位,让第一个元素position的值为absolute或者relative,第二个元素的position属性值为absolute,且设置bottom为0px即可。

要居中,我们可以设置left: 50%; margin-left: -第二个div宽度一半px;


最好让第一个元素的postion的值为relative,这样的话,它还占据文档流,如果设置为absolute的话,他就不再占据文档流,对后面的标签的布局将会产生比较大的影响。

示例代码如下:






无标题文档




测试一下
2222


你可能感兴趣的:(css)