CSS学习之position属性

本文详细解析了CSS中的四种定位方式:static、relative、absolute和fixed。分别介绍了每种定位的特点及应用原则,帮助读者理解如何在网页布局中正确使用这些定位属性。

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

 

Position:

a.static默认值

b.relative相对定位

c.absolute绝对定位

d.fixed固定定位

 

“已经定位”:含义是position属性被设置为除static外的三种方式任意一种

“祖先元素”:当前DOM节点的上一个父节点

 

A.static:position

默认的属性值,也就是该盒子按照标准流(包括浮动方式)进行布局

 

B.relative:

相对定位,使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它

relative定位原则:1.使用相对定位的盒子,会相对于它在原本的位置,通过偏移指定的距离,到达新的位置

         2.使用相对定位的盒子仍在标准流中,它对父块和兄弟盒子没有任何影响

 

C.absolute:

绝对定位,盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子存在一样。

absolute定位原则:1.使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素(或上级元素)”为基准进行偏移。如果没有已经定位的祖先元素(上级元           素),那么会以浏览器窗口为基准进行定位

         2.绝对定位的框从标准流中脱离,这意味着它们对其后听兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样

D.fixed:

固定定位,它和绝对定位类似,只是以浏览器窗口为基准进行定位,也就是当拖动浏览器窗口的滚动条时,依然保持对象位置不变。

转载于:https://www.cnblogs.com/Vitus_feng/archive/2010/07/31/1789669.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值