position属性值

本文详细介绍了CSS中的position属性,包括static、relative、absolute、fixed等不同定位方式的特点与应用场景,并解释了如何通过这些属性实现元素的精确布局。

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

position属性是指本体相对于上级的定位,默认值是static,意味着没有被定位,出现在文档流中应该出现的位置
如果用position来布局页面,父级元素的position必须是relative或者absolute
行元素加了position:absolute;后可设置宽高(加了float和fixed以后也可以设置宽高)

常用的属性值:
static 没有定位,遵循正常文档流
relative 遵循正常文档流
absolute 脱离正常文档流,使用top/bottom left/right 属性进行绝对定位
fixed 脱离正常文档流,使用top/bottom, left/right属性以窗口为参考点进行定位,当出现滚动条时,对象不会随之移动

====相对与父元素绝对定位====
1. 如果想绝对定位一个元素,先指定一个父容器(相对定位或者绝对定位),那么E元素E就会相对于父容器绝对定位
2. 父元素F可以拥有属性float,比如{float:left;position:relative}
3. 这样的话,由于float是浮动,下面必须加一个清浮动的div <div style="clear: both;"></div>
相对定位的父容器,遵循正常文档流

====z-index====
定义元素之间的层级顺序,数值越大,层级越高
position: relative | absolute | fixed 有效
position: static 时无效
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值