12 lines
1.1 KiB
Plaintext
12 lines
1.1 KiB
Plaintext
---
|
|
title: '`relative`, `absolute`, `fixed` 和 `sticky` 定位的元素之间有什么区别？'
|
|
---
|
|
|
|
定位元素是一个元素，其计算的 `position` 属性是 `relative`, `absolute`, `fixed` 或 `sticky`。
|
|
|
|
- `static`: 默认位置; 元素将会像通常那样流入页面。 `top`, `right`, `bow`, `left` 和 `z-index` 属性不生效。
|
|
- `relative`：元素的位置相对于它自己进行调整，而不改变布局（从而在元素没有被定位的情况下为它留下一个缺口）。
|
|
- `absolute`：该元素从页面流中移除，并相对于其最近的祖先（如果有的话）或相对于初始包含块的指定位置定位。 绝对位置的方框可以有边距，而且它们不会与任何其他外边距一起折叠。 这些元素不影响其他元素的位置。
|
|
- `fixed`：该元素被从页面流中移除，并被定位在相对于视口的指定位置，滚动时不会移动。
|
|
- `sticky`：粘性定位是相对定位和固定定位的一种混合。 该元素被视为 `relative` 定位，直到它越过一个指定的阈值，超过这一阈值它将被视为 `fixed` 定位。
|