CSS定位必知必会——position:absolute到底如何运作？（上）

2023-10-11 08:29:20

CSS定位入门指南：了解position属性及其用法

在CSS中，了解如何让元素在页面上准确呈现至关重要，而position属性在这方面扮演着至关重要的角色。本文旨在全面解释position属性及其不同值的含义，指导您掌握CSS定位的艺术。

了解position属性

position属性定义了元素在页面中的定位方式，有四个主要值：static、relative、absolute和fixed。每个值都会影响元素在包含块中的位置，以及与其他元素的交互方式。

static （默认）：元素按照正常的文档流进行定位。
relative ：元素相对于其当前位置进行定位。
absolute ：元素相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于根元素（html）进行定位。
fixed ：元素相对于浏览器窗口进行定位。

包含块：元素定位的参考点

包含块是元素定位的参考点。对于position:relative/static元素，包含块是由其最近的块容器祖先盒的content-box边界形成的。对于position:fixed元素，包含块是视口（viewport）。对于position:absolute元素，包含块是由其最近的已定位祖先元素的边框形成的。

偏移：元素相对于其包含块的距离

偏移是指元素相对于其包含块的距离。偏移可以是正值或负值。正值表示元素在包含块内向右或向下移动，负值表示元素在包含块内向左或向上移动。

叠放次序：元素重叠的顺序

叠放次序决定了元素在页面中重叠的顺序。叠放次序由元素的定位属性、z-index属性和元素在文档流中的顺序决定。定位属性值越高的元素，其叠放次序越高。z-index属性值越高的元素，其叠放次序越高。元素在文档流中的顺序越靠前，其叠放次序越高。

使用position:absolute定位元素

position:absolute可用于将元素从正常的文档流中脱离出来，并将其定位在页面中的任意位置。要使用position:absolute定位元素，需要先设置元素的定位属性值为absolute，然后设置元素的left、top、right或bottom属性值来指定元素在页面中的位置。

例如，以下代码将一个元素绝对定位在页面右上角，距离浏览器窗口的顶部10像素，距离浏览器窗口的右边10像素：

<div style="position: absolute; top: 10px; right: 10px;">
  这是一个绝对定位的元素。
</div>

使用position:absolute定位元素的注意事项

使用position:absolute定位元素时，需要注意以下事项：

position:absolute元素会脱离正常的文档流，因此它不会占据空间。这意味着其他元素可以流到它所在的位置。
position:absolute元素的定位相对于其最近的已定位祖先元素。如果没有已定位的祖先元素，则相对于根元素（html）进行定位。
position:absolute元素的偏移可以是正值或负值。正值表示元素在包含块内向右或向下移动，负值表示元素在包含块内向左或向上移动。
position:absolute元素的叠放次序由元素的z-index属性和元素在文档流中的顺序决定。z-index属性值越高的元素，其叠放次序越高。元素在文档流中的顺序越靠前，其叠放次序越高。