CSS中的position属性——从静态流中脱颖而出

一、静态流与position

CSS中的position属性用于将元素从普通的文档流中脱离出来，使其可以通过top、right、bottom和left属性来定位。在理解position之前，我们需要了解什么是静态流。

本质上，文档中的每个元素都可以看做是由块级元素和行内元素构成的。当一个元素在文档中被放置时，它会按照特定的规则沿着文档流流动。这个规则被称为“静态流”，也叫“普通流”或“自然流”。

普通流的主要特点是元素会一个接一个地放置，每个元素占据一行或一行的一部分。块元素会在页面中自动换行，行内元素则会在同一行内放置。

而当一个元素被应用了position: absolute;、position: fixed;、position: relative;或position: sticky;属性时，它就会从普通流中脱离出来，不再跟其他元素遵循普通流的规则排布。

下面是一个简单的示例：

/* HTML */
<div class="container">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
</div>

/* CSS */
.container {
  width: 500px;
  height: 500px;
}

.box {
  width: 100px;
  height: 100px;
}

.box-1 {
  background-color: red;
}

.box-2 {
  background-color: blue;
}

默认情况下，box-1和box-2元素会按照普通流的规则排布在容器中：

/* 等价于position: static; */
.box {
    position: relative;
}

如果我们将box-1元素设置为position: absolute;，则它就会从普通流中脱离出来，不再占据空间。box-2元素会自动顶上去：

.box-1 {
    position: absolute;
}

二、position属性详解

1. position: static;

这是默认值，即元素会按照普通流的规则排布。如果你没有显式设置position属性，则元素的position值为static。

2. position: relative;

元素的位置会相对于它原来应该在的位置进行定位。也就是说，它在文档流中的位置不会改变，不会影响其他元素的位置。

相对定位会创建一个新的定位上下文。这个定位上下文会影响元素内部的绝对定位子元素的位置。后面我们会讲到绝对定位。

下面是一个示例，我们将box-1元素向右移动了20px：

.box-1 {
    position: relative;
    left: 20px;
}

3. position: absolute;

这种定位方式会使元素脱离出文档流，完全不占据原来的位置，也不会对其他元素造成任何影响。

当一个元素设置为position: absolute;时，它会相对于最近的有定位的祖先元素进行定位（注意是有定位的祖先元素，后面会详细讲到）。如果没有定位的祖先元素，那么它的位置会相对于最初的包含块（即浏览器窗口）进行定位。

下面是一个示例，我们将box-1元素相对于container的左上角定位，并且将其z-index设置为1，使其在box-2元素的上层：

.box-1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

4. position: fixed;

fixed定位与absolute定位类似，都是相对于最初的包含块（即浏览器窗口）进行定位。不过，它的定位与视窗有关，而不是与文档流有关。

它的特点是无论用户如何滚动页面，元素都会保持相对不动的位置。fixed定位常用来为页面悬浮的导航条、广告条等元素固定在页面上方。

下面是一个示例，我们将box-1元素设置为fixed定位，在视口的右下角定位：

.box-1 {
    position: fixed;
    bottom: 0;
    right: 0;
}

5. position: sticky;

粘性定位是一种混合了相对定位和固定定位的定位方式。元素会在跨越特定阈值前为相对定位，然后在接下来的滚动中为固定定位。

它的特点是能够在滚动到特定位置时将元素固定在页面上，不过一旦它们脱离了它们的位置，它们就会重新成为相对定位的元素。

下面是一个示例，我们将box-1元素设置为sticky定位，在滚动到顶部时将其固定在页面上：

.box-1 {
    position: sticky;
    top: 0;
}

三、定位上下文

所谓“定位上下文”，就是一个对定位元素周围的区域进行定义和管理的区域。

每个元素都会自己创建一个定位上下文。当元素被设置为position: static（默认值）或position: relative时，它们会成为自己的定位上下文。而当元素被设置为position: absolute、position: fixed或position: sticky时，它们会相对于最近的有定位的祖先元素进行定位。

下面我们来看一个示例，box-1元素被设置为relative定位，同时它的子元素box-1-1元素被设置为absolute定位。因为box-1-1元素是box-1元素的子元素，所以它的“最近的有定位的祖先元素”就是box-1元素。

/* HTML */
<div class="container">
    <div class="box box-1">
        <div class="box box-1-1"></div>
    </div>
</div>

/* CSS */
.box-1 {
    position: relative;
}

.box-1-1 {
    position: absolute;
    top: 0;
}

我们发现，box-1-1元素的位置是相对于box-1元素定位的，而不是相对于container定位的。

四、小结

通过本文的介绍可以看出，position属性是CSS中非常有用也十分灵活的属性，它可以让我们实现各种有趣的效果。对于不同的定位方式，我们需要理解它们的定位特点；而对于定位上下文，我们需要了解有关祖先元素的概念。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/235607.html