继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

relative、absolute和float

AllySu
关注TA
已关注
手记 40
粉丝 870
获赞 3669

position:relative和position:absolute都可以改变元素在文档流中的位置,设置position:relative或position:absolute都可以让元素激活left、right、top、bottom和z-index属性(默认情况下,这些熟悉未激活,设置了也无效)。网页虽然看起来是平面的二维结构,但它其实是有Z轴的,Z轴的大小由z-index控制,默认情况下,所有元素都是在z-index:0这一层。元素根据自己的display类型、长宽、内外边距等属性顺序排列在z-index:0这一层里,这就是文档流。设置position:relative或position:absolute会让元素“浮”起来,也就是z-index的值大于0,它会改变正常情况下的文档流。
不同的是position:relative会保留自己在z-index:0层的占位,left、top、right、bottom值是相对于自己在z-index:0层的位置,虽然它的实际位置可能因为设置了left、top、right、bottom值而偏离原来的位置,但对于其他仍然在z-index:0层的元素位置不会造成影响。

而position:absolute会完全脱离文档流,不再在z-index:0层保留占位符,其left、top、right、bottom值是相对于自己最近的一个设置了position:relative或position:absolute的祖先元素的,
如果祖先元素都没有这是position:relative和position:absolute,那么就相对于body元素。

除了position:relative和position:absolute,float也能改变文档流,不同的是,float属性不会让元素“上浮”到另一个z-index层,它仍然让元素在z-index:0层排列,float不像position:relative和position:absolute那样,它不能通过left、top、right、bottom属性精确地控制元素的坐标,它只能通过float:left或float:right来控制元素在同层里“左浮”“右浮”。float会改变正常的文档流排列,影响到周围元素。

另一个有趣的现象是position:absolute和float会隐式的改变display类型,不论之前什么类型的元素(display:none除外),只要设置了position:absolute、float:left或float:right中任意一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素。就算我们显示的设置display:inline或者display:block,也任然是无效的(float在IE6下的双边距BUG就是利用添加display:inline来解决的)。值得注意的是,position:relative却不会隐式的改变display的类型。

打开App,阅读手记
4人推荐
发表评论
随时随地看视频慕课网APP