CSS 使用position:absolute时，默认的top、left、bottom或right值是什么

在本文中，我们将介绍当使用position:absolute时，top、left、bottom或right属性的默认值是什么，并提供一些示例来说明。

阅读更多：CSS 教程

top、left、bottom或right属性的默认值

当使用position:absolute时，元素的top、left、bottom或right属性将决定其相对于离它最近的非static定位的祖先元素的位置。

这些属性的默认值为auto。当未明确设置这些属性时，它们将根据不同的情况具有不同的默认值。下面是它们的默认值：

top：auto
left：auto
bottom：auto
right：auto

这些auto值意味着元素的位置将由浏览器自动计算。换句话说，使用这些默认值时，元素将根据其文档流的位置进行定位。

示例说明

让我们通过一些示例来说明这些默认值。

示例1：顶部和左侧为默认值

HTML代码：

<div id="container">
  <div id="element">Hello, world!</div>
</div>

CSS代码：

#container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

#element {
  position: absolute;
}

解释：
在这个示例中，父容器#container的position属性被设置为relative，而子元素#element的position属性被设置为absolute。由于没有明确指定top和left属性的值，它们将使用默认值auto。这意味着#element将相对于#container的文档流位置进行定位。

示例2：底部和右侧为默认值

HTML代码：

<div id="container">
  <div id="element">Hello, world!</div>
</div>

CSS代码：

#container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

#element {
  position: absolute;
  bottom: 0;
  right: 0;
}

解释：
在这个示例中，父容器#container的position属性被设置为relative，而子元素#element的position属性被设置为absolue。bottom和right属性的值被设置为0，这意味着#element的底部与#container的底部对齐，右侧与#container的右侧对齐。因此，它们不再是默认的auto值。