css布局-position

本文详细解析了CSS中四种基本定位方式:static、relative、absolute及fixed的特点与应用。通过具体描述每种定位方式如何影响元素的位置及其与其他元素的关系,帮助读者更好地理解和使用这些定位属性。

这里主要是positon的4个属性。

1.static

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”,一个 

position 属性被设置为其他值的元素表示它会被“positioned”。

2.relative

在一个相对定位(position属性的值为relative)的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其

他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

个人理解为:相对于自身的位置变化。

3.absolute

如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且

它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。

个人理解为:相对于其他一个positioned对象的位置,一定要有相对对象。

4.fixed

一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。

和 relative 一样, top 、 right 、 bottom 和 left 属性都可用。

就可以理解为相对于视窗的位置。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值