1. 我们为什么要学习定位
在网页上,我们会发现有些图标是定在某一个地方,这是如何实现的呢?这里就用到了定位
2. 元素的定位属性
- 元素的定位主要包括
定位模式
和边偏移2个部分
。
3. 静态定位 static
- 对边偏移无效。
- 一般用来清除定位的
- 一个有定位的盒子不想再有定位了,加上
position:static
就行了。
4. 相对定位relative(自恋型)
- 相对定位可以通过边偏移来移动位置,但是原来的位置继续占有。
- 每次移动的时候,都是以自己的左上角为起点的,(相对于自己原来的位置)原来的位置继续占有。
- 相对定位的盒子仍在标准流中,它后面的盒子不乱。
- 如果说浮动是让多个块级元素一行显示,那么定位的价值是让我们的盒子移动到我们想要的位置上去。
不加定位的效果图
加了相对定位的效果图
原来的位置继续占有。
5. 绝对定位(拼爹型)
这里有 两个盒子
当给上面的第一个盒子加绝对定位的时候
- 可以通过边偏移移动位置,但他完全脱标,不占位置。
父亲里有个儿子
当子向左偏移的时候
会跑出去。
父亲不加定位,儿子会跑出去,儿子会以浏览器为基准点定位。
父亲有定位,儿子会以最近的基准点对齐。
子绝父相
子绝对定位,父亲相对定位。
相对定位 占有位置 不脱标
绝对定位 不占有位置 脱标
在实际开发中这个口诀用的很多
千思不得同枕梦,吾欲与卿度良辰。