CSS 定位属性：absolute、relative、fixed详解

CSS 定位属性：absolute、relative、fixed详解

本文将深入探讨 CSS 中三种常见的定位属性：absolute、relative 和 fixed，并解释它们如何影响元素的布局和层叠顺序。

1. position: absolute

• 元素设置为 position: absolute; 后，后面的元素不会占据当前元素的位置。这是因为 absolute 会使元素脱离正常文档流，并相对于最近的设置了 position 属性的父元素（如果父元素没有设置 position，则相对于根元素 html）进行定位。

2. position: relative

• 元素设置 position: relative; 后，后面的元素会占据当前元素的位置。relative 会使元素相对于其正常位置进行定位，但不会影响其他元素的布局。换句话说，它会将元素从其原本的位置“移动”，但不会改变它在文档流中的位置。

3. position: fixed

• 元素设置为 position: fixed; 后，后面的元素会占据当前元素的位置。fixed 会使元素相对于浏览器窗口进行定位，不会随滚动条滚动而变化位置。这意味着元素会固定在浏览器窗口中的特定位置。

4. z-index 属性

• 当元素的 position 设置为 absolute、relative 或 fixed 后，可以使用 z-index 属性来控制元素的层叠顺序。z-index 属性值越大，元素在层叠顺序中越靠前，即越在上层显示。

总结

• absolute 使元素脱离文档流，相对于最近的定位父元素定位。
• relative 使元素相对于其正常位置定位，不影响文档流。
• fixed 使元素相对于浏览器窗口定位，不会随滚动条滚动。

z-index 属性用于控制元素在层叠顺序中的位置，值越大，元素越在上层显示。