CSS position属性的相对/绝对定位

在Web开发中，CSS样式是一个重要的工具。其中最重要的CSS属性之一是position。它可以用来控制HTML元素的定位。这篇文章将阐述CSS position属性的相对/绝对定位，以及它们如何使用。

一、相对定位

相对定位使你可以相对于元素本身的位置来移动元素。例如，如果你想让一个图片在正常文本流中上移10像素，你可以使用以下代码：

img {
  position: relative;
  top: -10px;
}

在上述代码中，我们给img元素设置了position: relative;，告诉浏览器我们要以相对定位的方式来布局这个元素。然后我们使用top属性来移动元素相对于它的正常位置向上移动10像素。

相对定位还可以结合left、right和bottom属性使用，用来移动元素相对于其本来位置的左、右或下。

二、绝对定位

绝对定位允许您从文档流中完全取出元素，并相对于其最近的非static（默认）祖先元素来放置它。这就意味着，您可以用绝对定位在一个HTML文件中添加多个元素。

以下代码是如何给一个DIV绝对定位的示例：

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

在上述示例中，我们告诉浏览器将div元素绝对定位。我们使用top和left属性来指定元素相对于其最近的非static祖先元素的距离。在这个例子中，我们让div元素距离其最近的祖先元素的顶部和左侧分别为50像素和100像素。

绝对定位还可以结合right和bottom属性使用，哪个方向与父元素的边框更近，就沿那个方向定位元素

三、z-index属性

当您有多个绝对定位的元素时，通过z-index属性您可以指定元素的层叠顺序。z-index属性仅在元素设置了position属性时才能工作。z-index属性的值可以是正整数、0或负整数。具有较高z-index属性值的元素将位于其他元素的顶部。

以下是z-index属性在两个绝对定位元素之间分层的示例：

#div1 {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
}

#div2 {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 2;
}

在上述代码中，我们定义了两个绝对定位元素。我们让第一个元素在第二个元素之上，将其z-index属性值设为1，将第二个元素的z-index属性值设为2。

四、结尾

CSS position属性的相对/绝对定位是CSS开发中非常重要的一部分。通过相对和绝对定位，您可以轻松地在布局中移动和定位元素。z-index属性可以使您控制元素的层叠顺序。在使用它们时，请确保您理解它们对您的布局的影响并且使用得当。