css position详解

本文详细解析了CSS中的position属性,包括relative、absolute、fixed等不同值的含义及其应用场景。阐述了这些定位方式如何影响元素的位置及层叠顺序,并解释了它们与文档流的关系。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

     在设置position:relative和position:absolute,可以激活元素的left、top、right、bottom和z-index属性(默认情况下是无效的)。

     网页是有带z轴的二维结构,默认为z-index:0;这一层的。元素自己的display类型、长宽、内外边距等属性排列在z-index:0,这一层,此为文档流。

     在设置position:relative或position:absolute会让元素浮现,即z-index>0;但是position:relative会保留在z-index:0层。


     position:relative:相对于自身位子的偏移;(元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了

    position:absolute:相对于祖先对象窗口的偏移,若祖先对象无position,则以body对象进行定位。(元素就脱离了文档

    relative和absolute都是以祖先对象为偏移的,只不过偏移的位子不一样。如果一个元素绝对定位后,其参照物是以离自身最近元素是否设置了相对定位,如果有设置将以离自己最近元素定位,如果没有将往其祖先元素寻找相对定位元素,一直找到html为止。

   position:fixed;始终以body对象进行定位,是特殊的absolute;

   position:static;按正常的文档流进行排列


   position:absolute和float会隐式的改变display类型(display:none除外),元素会以display:inline-block的方式显示,元素设置为display:inline或block,仍旧无效。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值