CSS 绝对定位属性解析：absolute 和 fixed

在CSS中，position: absolute; 和 position: fixed; 是两种不同的定位机制，以下是对这两种定位属性的详细解析：

absolute 定位

absolute 定位使元素脱离文档流，并相对于其最近的非 static 定位祖先元素进行定位，如果没有这样的元素，则相对于初始包含块，使用 top、right、bottom、left 等属性可以指定元素的确切位置。

特点

元素脱离正常文档流，不占据空间。

相对于最近的非 static 定位的祖先元素定位，如果没有，则相对于初始包含块（通常是视口）。

定位元素的位置可以通过 top、right、bottom、left 属性来设置。

重叠其他元素时，会覆盖在上方，因为它已经脱离了文档流。

fixed 定位

fixed 定位也使元素脱离文档流，但与 absolute 不同的是，它是相对于浏览器窗口进行定位的，无论页面如何滚动，fixed 定位的元素都会停留在设定的位置。

特点

元素脱离正常文档流，不占据空间。

相对于浏览器窗口定位，即使页面滚动，元素也会停留在相同的位置。

同样可以使用 top、right、bottom、left 等属性来定位元素。

固定定位通常用于创建始终可见的导航栏或广告横幅等。

比较

特性	absolute	fixed
定位参考点	最近的非 static 定位祖先元素或初始包含块	浏览器窗口
随页面滚动	跟随滚动	固定在视口中的特定位置
常用场景	创建弹出框、下拉菜单等	创建固定导航栏、广告等

在实际开发中，使用 absolute 和 fixed 定位可以实现多种布局效果，但需要注意它们对页面布局的影响，以及可能引起的层叠顺序问题，通过合理地设置 zindex 属性，可以控制不同定位元素的堆叠顺序。