十六、 定位

本文详细介绍了CSS中的定位技术,包括标准流、浮动和定位模式。重点讲解了相对定位、绝对定位、固定定位的概念和应用场景,如相对定位的自恋型移动,绝对定位的拼爹型定位,以及固定定位在滚动页面中的应用。同时,还提到了粘性定位的特性以及定位中的叠放次序(z-index)控制。文章强调了'子绝父相'的定位原则,并提供了居中定位等实用技巧。
摘要由CSDN通过智能技术生成

1. 定位

提问:

以下情况使用标准流或者浮动能实现吗?

1. 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子.

1.1 为什么需要定位

提问:

以下情况使用标准流或者浮动能实现吗?

2. 当我们滚动窗口的时候,盒子是固定屏幕某个位置的。

以上效果,标准流或浮动都无法快速实现,此时需要定位来实现。

所以:

1. 浮动可以让多个块级盒子一行没有缝隙排列显示,

经常用于横向排列盒子。

2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。

1.2 定位组成

定位:将盒子定在某一个位置,所以定位也是在摆放盒子,

按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移 。

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

1. 定位模式

定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值