2022-09-15 03:35:27
CSS 定位
position 用来控制元素的定位方式，以及元素是否脱离普通文档流。
属性值：
static：静态定位，默认值relative：相对定位absolute：绝对定位fixed：固定定位sticky：粘性定位
定位方式对比
| 定位方式 | 是否脱离文档流 | 定位参照 | 说明 |
|---|---|---|---|
static | 否 | 普通文档流 | 默认定位方式，偏移属性通常不生效 |
relative | 否 | 自身原本位置 | 视觉上发生偏移，但原本空间保留 |
absolute | 是 | 最近的非 static 定位祖先元素 | 不占据原本空间，常配合父元素 relative 使用 |
fixed | 是 | 通常是视口 | 页面滚动时位置保持固定 |
sticky | 否 | 最近的滚动容器和父元素边界 | 滚动前像 relative，达到阈值后产生粘性效果 |
定位相关属性
| 属性 | 作用 |
|---|---|
top | 设置元素上边缘的偏移距离 |
right | 设置元素右边缘的偏移距离 |
bottom | 设置元素下边缘的偏移距离 |
left | 设置元素左边缘的偏移距离 |
z-index | 控制元素在层叠方向上的显示顺序 |
top、right、bottom、left并不是在所有定位方式下都会生效。如position: static时，不会生效。
static
- 不脱离普通文档流。
- 按照元素在文档中的顺序正常占位。
top、right、bottom、left通常不生效。
relative
- 元素相对于自身原本的位置进行偏移。
- 不脱离普通文档流。
- 原本占据的空间仍然保留。
- 偏移后的视觉位置不会影响其他普通流元素。
absolute
- 元素脱离普通文档流，不再占据原来的空间。
- 优先相对于最近的非
static定位祖先元素。 - 如果没有这样的祖先元素，通常相对于初始包含块定位（页面根区域）。
- 元素在布局表现上会发生块级化，如普通行内元素也可以设置宽高。
fixed
- 脱离普通文档流。
- 通常相对于视口定位。
- 页面滚动时，元素位置不会随页面内容滚动。
如果祖先元素设置了
transform、filter、perspective等属性，可能会创建新的包含块，使fixed元素相对于该祖先元素定位。
sticky
元素在没有达到指定阈值前，会按照普通文档流排列；当滚动到指定阈值后，会产生类似固定定位的粘性效果。
- 不脱离普通文档流，原本空间会保留。
- 必须设置
top、right、bottom、left中至少一个偏移值。 - 粘性效果会受到父元素和滚动容器边界限制。
一般不生效原因：
- 没有设置
top、right、bottom或left。 - 父元素高度不够，没有可滚动的空间。
- 祖先元素设置了不合适的
overflow，影响了滚动容器。