持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
核心描述
-
position：允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。
-
static：静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。 -
relative：与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。- 如果不设置 top,right,bottom,left，则基本与static 表现一致
- 设置了 top,right,bottom,left 后，会使元素做对应的偏移
-
absolute：绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。- 绝对定位设置位置偏移之后，是相对于其父级元素
- 如果父级元素为 static ，则会相对于其父级的父级元素，如果没有找到非 static 值的父级元素，则最终会相对于 html
- 相对父级元素是非 static 意味着，父级是 relative、absolute、fixed、sticky 均可
- 最佳实践是用一个 relative 的父级包裹
-
fixed：固定定位，与 absolute 的唯一区别是，固定定位固定元素则是相对于浏览器视口本身 -
sticky：粘性定位，它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。- 是相对于视口位置
- 如果这个元素的父级是 body ，则达到其阈值点后，会一直固定在设置的位置
- 如果这个元素的父级是其他元素，则达到其阈值点后，会固定在设置的位置，但是当其父级元素已不在视口中时，则当前元素也会消失在视口中
知识拓展
- 当元素设置了如 static、relative、sticky 等值时，再设置 margin-top 等属性，会影响父元素，这里可以用 BFC 相关知识解决
- 所有的 position 属性，如果不设置改变其位置的 top、left、right、bottom 等属性，均不会有位置变化
- z-index 作用于所有 position 非 static 属性的元素上
- 除了上述 5 种属性值之外，position 还有 4 种取值，但归根结底是5种类型，9 种取值：
- inherit：规定应该从父元素继承 position 属性的值，inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性，兼容：ie7及以下版本不支持此属性
- initial：设置positon的值为默认值(static)，兼容：ie不支持此属性
- unset：设置positon的值为不设置，即为 static
- 如果该属性的默认属性是 继承属性(例如字体相关的默认属性基本都是继承)，该值等同于 inherit
- 如果该属性的默认属性 不是继承属性(例如pisition的默认属性为static)，该值等同于 initial
- revert：指定恢复 user-agent 的设置，如果用户有设置，则为用户设置，否则为浏览器默认设置
参考资料
- MDN-定位：developer.mozilla.org/zh-CN/docs/…
- 《CSS 权威指南（下册）》
浏览知识共享许可协议
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。
