定位(定位组成【定位模式(静态定位,相对定位,绝对定位,固定定位,粘性定位,定位总结),位偏移】,)

本文详细介绍了CSS定位的各个方面,包括定位模式(静态定位、相对定位、绝对定位、固定定位和粘性定位)以及位偏移。静态定位遵循标准流,相对定位根据自身位置移动,绝对定位相对于最近的定位祖先元素,固定定位相对于浏览器视口,粘性定位结合了相对和固定定位的特点。边偏移属性如top、bottom、left和right用于调整元素位置,定位模式与边偏移配合使用实现灵活布局。

定位

定位组成

定位:将盒子在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子

定位也是用来布局的,它有两部分组成:

定位 = 定位模式 + 边偏移

定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位模式

选择器 { 
    position: 属性值; 
}

定位模式是有不同分类的,在不同情况下,我们用到不同的定位模式。

定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:

静态定位(static)

静态定位是元素的默认定位方式,无定位的意思。它相当于 border 里面的none,静态定位static,不要定位的时候用

静态定位 按照标准流特性摆放位置,它没有边偏移。

静态定位在布局时我们几乎不用的

相对定位(relative) 

相对定位是元素在移动位置的时候,是相对于它自己原来的位置来说的(自恋型)。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员shy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值