关于position属性

关于position属性


总述

position有5种属性值,其中`inherit`表示从父元素继承position属性的值;`static`是默认值,即没有定位,如果使用`static`,top,bottom,left,right或者z-index声明都无效;absolute是绝对定位;fixed是固定定位;relative是相对定位。

 absolute

position属性值为absolute时有两种情况,

1.没有设置left,top等偏移值,其位置是当前文档流中的位置

2.设置了top,left等值,其位置为相对于其position不为static的父元素的偏移位置,若父元素的position都为static,则为相对于body的偏移

不管是否配置偏移值,带有position:absolut属性值的元素都不占据文档流中的位置,即脱离了文档流,不影响其他元素。

relative

属性值为relative时不脱离文档流,会为该元素保留位置,并不影响其他元素;但是当它的同胞元素的position为absolute/fixed且设置的偏移值正好覆盖在其元素上时,它的同胞元素会占据属性值为relative的元素的位置。


fixed

fixed属性值为固定定位,生成相对定位的元素,相对于其正常位置进行定位。



Tips:当出现元素覆盖 且 元素的position或继承的position不为static时,可通过设置`z-index`的值来确定来将一个元素放在另一个元素之后或之前,

当`z-index:1`时优先显示;


当`z-index:-1`时让另一个元素优先显示

默认值为0.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容