- 可以让元素自由的摆放在网页的任意位置
- 一般用于 盒子之间的层叠情况
设置偏移值:水平+垂直就近各取一个
静态定位
注意点:
-
静态定位就是之前标准流,不能通过方位属性进行移动
-
之后说的定位不包括静态定位,一般特指后几种:相对、绝对、固定
相对定位
- 不会脱标
- 相对于它 原来在标准流中的位置
- 继续占有在标准流中的位置
绝对定位
- 会脱标
- 是元素以带有定位的父级元素来移动位置 (拼爹型)
- **完全脱标** —— 完全不占位置;
- **父元素没有定位**,则以**浏览器**为准定位(Document 文档)。
- 绝对定位的特点:(务必记住)
- 绝对是以带有定位的父级元素来移动位置 (拼爹型) 如果父级都没有定位,则以浏览器文档为准移动位置
- 不保留原来的位置,完全是脱标的。
- 因为绝对定位的盒子是拼爹的,所以要和父级搭配一起来使用。
-
固定定位
- 是绝对定位的一种特殊形式: (认死理型) 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形
- 完全脱标 —— 完全不占位置;
- 只认浏览器的可视窗口
重要定位口诀 —— 子绝父相
子绝父相 —— 子级是绝对定位,父级要用相对定位。 在使用子绝父相的时候,发现父元素已经有绝对定位了,此时直接子绝即可!
➢ 原因:父元素已经有定位已经满足要求,如果盲目修改父元素定位方式,可能会影响之前写好的布局