论 relative 与 absolute 孰优孰劣

relative 和 absolute 都是 position 中的属性，它们都可以使元素脱离正常的文档流，从而实现各种各样的布局效果。然而，这两种属性之间存在着一些关键的区别。

• relative

  • 元素相对于其正常位置移动。
  • 元素不会脱离文档流。
  • 元素的子元素相对于其父元素移动。

• absolute

  • 元素相对于其最近的已定位祖先元素移动。
  • 元素脱离文档流。
  • 元素的子元素相对于其父元素移动。

在大多数情况下，relative 比 absolute 更常用。这是因为 relative 元素不会脱离文档流，这使得它们更容易与其他元素交互。例如，您可以使用 relative 元素来创建一个下拉菜单，当您将鼠标悬停在菜单项上时，下拉菜单就会出现。

然而，在某些情况下，absolute 元素是更好的选择。例如，您可以使用 absolute 元素来创建一个浮动侧边栏，该侧边栏始终位于浏览器窗口的边缘。

static、fixed 和 sticky

position 除了 relative 和 absolute 以外，还有另外两种属性分别是 static 和 fixed。

• static

  • 元素保持其在文档流中的正常位置。
  • 元素不会脱离文档流。
  • 元素的子元素相对于其父元素移动。

• fixed

  • 元素相对于浏览器窗口移动。
  • 元素脱离文档流。
  • 元素的子元素相对于其父元素移动。

• sticky

  • 元素相对于其最近的已定位祖先元素移动。
  • 元素不会脱离文档流。
  • 元素的子元素相对于其父元素移动。

fixed 元素始终位于浏览器窗口的同一位置，即使您滚动页面，fixed 元素也不会移动。这使得 fixed 元素非常适合创建浮动导航栏或页脚。

sticky 元素在页面滚动时保持其相对于其最近的已定位祖先元素的位置，直到它到达其最近的已定位祖先元素的底部。一旦 sticky 元素到达其最近的已定位祖先元素的底部，它就会固定在浏览器窗口的底部。这使得 sticky 元素非常适合创建侧边栏或聊天窗口。

总结

position 的四种属性各有其优缺点，在不同的场景中应选择合适的属性。

• static ：元素保持其在文档流中的正常位置，不会脱离文档流，其子元素相对于其父元素移动。
• relative ：元素相对于其正常位置移动，不会脱离文档流，其子元素相对于其父元素移动。
• absolute ：元素相对于其最近的已定位祖先元素移动，脱离文档流，其子元素相对于其父元素移动。
• fixed ：元素相对于浏览器窗口移动，脱离文档流，其子元素相对于其父元素移动。
• sticky ：元素相对于其最近的已定位祖先元素移动，不会脱离文档流，其子元素相对于其父元素移动。