Position 定位

正常/文档流 Normal Flow

Normal Flow 即浏览器默认的文档布局方式。

定位就是通过设置 https://developer.mozilla.org/en-US/docs/Web/CSS/position 属性的值来覆盖默认的布局方式。

position: static 默认值 默认的布局方式。

position: relative 相对默认的布局位置进行定位。

💡 相对定位就是“相对自己定位”。

.avatar {
  top: 3px;
  left: 7px;
  position: relative;
}

position: absolute 绝对定位元素脱离正常文档流，相对其定位上下文（Positioning Context）进行定位。

定位上下文就是值绝对定位元素相对哪个元素定位，默认的定位上下文是 <html>。

假如你想设定某个绝对定位元素的定位上下文，则需要在这个元素的某个祖先元素上设置 position: relative。

.feedback {
  z-index: 1; 
}

position: fixed 相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。

.feedback {
  right: 30px;
  bottom: 30px;
  position: fixed;
}

position: sticky 是相对定位和固定定位的结合。默认情况下表现为相对定位，当浏览器窗口顶端与元素的距离等于 top 属性的值时，转变为固定定位。

🤔 position 属性有哪些值，它们的表现有什么不同？