第七天笔记,CSS属性(定位)

本文深入探讨了CSS中的定位属性,包括static、relative、absolute、fixed以及新增的sticky定位。static是默认定位,遵循HTML流;relative允许元素相对于其正常位置偏移;absolute定位脱离文档流,依据最近定位父元素或浏览器;fixed定位基于视口,常用于创建吸顶效果;而sticky定位则是结合relative和fixed特性,当元素进入视口时变为固定定位。理解这些定位方式对于网页布局至关重要。

定位

position 定位属性,检索对象的定位方式;

1、static:默认值,无特殊定位,对象遵循HTML原则; 2、absolute:绝对定位,将对象从文档流中完全拖离出来,使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位;如果不存在这样的父对象,则依据《浏览器》进行定位,而其层叠通过z-index属性定义 3、relative :相对定位遵循正常的文档流,将依据right,top,left,bottom(相对定位)等属性在正常文档流中相对自身位置进行偏移;其层叠通过z-index属性定义. 4、fixed:(固定定位),类似于绝对定位的方式,但是它的参照物是浏览器的“可视”窗口,且脱离标准文档流;

定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位=定位模式+边偏移。
定位模式: 用于指定一个元素在文档中的定位方式。 边偏移则决定了该元素的最终位置。
边偏移: 边偏移就是定位的盒子移动到最终位置。有top. bottom. left 和right 4个属性。

父相子绝

position:sticky:粘性定位 吸顶

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值