本文已参与【新人创作礼】活动，一期开启掘金创作之路。
static - 静态定位
- 元素按照normal flow布局
- left 、right、top、bottom没有任何作用
relative - 相对定位
-
元素按照normal flow布局
-
可以通过left、right、top、bottom进行定位
- 定位参照对象是元素自己原来的位置
-
left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示
-
相对定位的应用场景
- 在不影响其他元素位置的前提下，对当前元素位置进行微调
absolute - 绝对定位
-
元素脱离normal flow（脱离标准流、脱标）
-
可以通过left、right、top、bottom进行定位
- 定位参照对象是最邻近的定位祖先元素
- 如果找不到这样的祖先元素，则参照视口
-
定位元素（positioned element）
- position值不为static的元素
- 也就是position值为relative、absolute、fixed的元素
fixed - 固定定位
- 元素脱离normal flow（脱离标准流、脱标）
- 可以通过left、right、top、bottom进行定位
- 定位参照对象是视口（viewport）
- 当画布滚动时，固定不动
子绝父相
-
在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
-
如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：
- 父元素设置position：relatiove（让父元素成为定位元素。而且父元素不脱离标准流）
- 子元素设置position：absolute
- 简称为“子绝父相“
将position设置为absolute/fixed元素的特点（一）
-
可以随意设置宽高
-
宽高默认由内容决定（类似 行内块，但不是行内块）
- 不再严格按照从上到下、从左到右排布
- 不再严格区分块级（block）、行内块（inline）、行内块级（inline-block）的很多特性都会消失
-
不再给父元素汇报宽高数据（脱离标准流的元素将不再撑起盒子高度）
-
脱标元素内部默认还是参照标准流布局
将position设置为absolute/fixed元素的特点（二）
-
绝对定位元素（absolutely positioned element)
- position值为absolute或者fixed的元素
-
对于绝对定位元素来说
- 定位参照对象的宽度 = left + right + margin-right + margin-left + 绝对定位元素实际的占位宽度
- 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
-
如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性
- left：0、right：0、top：0、bottom：0、margin：0
-
如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置一下属性
- left：0、right：0、top：0、bottom：0、margin：auto
- 另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）
粘性定位 - sticky
-
另外还有一个定位的position：sticky，比起其他定位值要新一些
- sticky是一个大家期待已久的属性
- 可以看做是相对定位和固定（绝对）定位的结合体
- 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点
- 当达到这个阈值点时，就会变成固定（绝对）定位
-
sticky是相对于最近的滚动祖先包含滚动视口的
补充：
auto到底是什么
auto -> 交给浏览器
width：auto
- 行内非替换元素 -> width：包裹内容
- 块级元素 -> width： 包含快的宽度
- 绝对定位元素 -> width：包裹内容
总结
| 脱离标准流 | 定位元素 | 绝对定位元素 | 定位参照对象 | |
|---|---|---|---|---|
| static - 静态定位 | 否 | 否 | 否 | 无 |
| relative - 相对定位 | 否 | 是 | 否 | 元素自己原来的位置 |
| absolute - 绝对定位 | 是 | 是 | 是 | 最邻近的定位祖先元素 （如果找不到这样的祖先元素，参照对象是视口） |
| fixed - 固定定位 | 是 | 是 | 是 | 视口 |
