CSS 定位：position: absolute; – 自动高度

在本文中，我们将介绍CSS中的绝对定位和自动高度。

阅读更多：CSS 教程

绝对定位（position: absolute;）

在CSS中，我们可以使用position: absolute;来实现绝对定位。相对于最接近的已定位的祖先元素进行定位。如果没有已定位的祖先元素，则相对于最初的包含块进行定位。

定位顶部（top）

使用top属性可以将元素相对于父元素顶部进行定位。可以使用具体的像素值或者百分比值。

示例：

.container {
  position: relative;
  height: 300px;
}

.box {
  position: absolute;
  top: 50px;
}

在上面的示例中，.box元素将被定位在其父容器.container的顶部50像素的位置。

定位底部（bottom）

使用bottom属性可以将元素相对于父元素底部进行定位。同样可以使用像素值或者百分比值。

示例：

.container {
  position: relative;
  height: 300px;
}

.box {
  position: absolute;
  bottom: 20px;
}

在上面的示例中，.box元素将被定位在其父容器.container的底部20像素的位置。

定位左侧（left）

使用left属性可以将元素相对于父元素左侧进行定位。同样可以使用像素值或者百分比值。

示例：

.container {
  position: relative;
  height: 300px;
}

.box {
  position: absolute;
  left: 10px;
}

在上面的示例中，.box元素将被定位在其父容器.container的左侧10像素的位置。

定位右侧（right）

使用right属性可以将元素相对于父元素右侧进行定位。同样可以使用像素值或者百分比值。

示例：

.container {
  position: relative;
  height: 300px;
}

.box {
  position: absolute;
  right: 30px;
}

在上面的示例中，.box元素将被定位在其父容器.container的右侧30像素的位置。

自动高度

在CSS中，我们可以使用height: auto;来实现自动高度。这意味着元素的高度会根据其内容自动调整。

自动高度的使用案例

通常情况下，我们会使用自动高度来适应元素内部的文本或者图片内容的变化。下面是一个例子：

.container {
  height: auto;
  width: 400px;
  border: 1px solid #000;
  padding: 10px;
  background-color: #fff;
}

.text {
  font-size: 18px;
  line-height: 1.5;
}

<div class="container">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lorem ipsum, aliquam sed bibendum eu, vestibulum vel leo.</p>
</div>

上面的例子中，.container元素的高度会根据其内部的文本内容自动调整。