我终于把 CSS Position 定位弄清楚了

如果你想真正地擅长CSS，那么对CSS position
属性的理解就非常重要。但是，对于初学者来说，这可能是难点之一。

本文将为大家介绍CSS的position
属性，以帮助大家轻松学习CSS position
属性的每个值是如何工作的，从而真正擅长CSS。

要了解position
属性和关联的值，我们首先需要确保我们了解元素在网页上是如何定位的。

流式布局

元素在页面上默认的定位布局方式是流式布局。默认情况下，这就是元素在页面上显示的方式。基本上，HTML文档流是页面上所有协同工作的元素的集合。

CSS将每个HTML元素都视为盒子，你可能已经听说过这种被称为盒子模型的盒子。默认情况下，块级元素（例如标题，段落或div
之类的东西）从新行开始，而内联元素（图像或span
）与周围的内容位于同一行。这种方式下元素的默认布局称为文档的默认流式布局，但是CSS在position
属性中为我们提供了一个功能强大的工具来覆盖默认流式布局。

首先让我们看看position
属性的作用。

position属性

CSS position
属性设置如何在文档中定位元素。我们可以用它来确定如何根据给position属性提供的值来定位各个元素。

position属性有五个值。

Static
Relative
Absolute
Fixed
Sticky

本文将涵盖所有这5个值，但是在此之前，我们需要了解placement
属性以及这个属性是如何影响定位的。

placement属性

就其本身而言，position
属性并没有多大作用。我们需要使用placement
属性（并非官方称谓哦）精确地告诉文档应该将元素放置在何处。为此有四个主要属性。

Top
Left
Right
Bottom

每一个属性都定义了元素的位置应从其默认值调整多少，以及往哪个方向调整。

position属性值

静态定位

静态定位是position
属性的默认值。即页面上的元素按默认布局流预期的顺序显示。placement
属性top
，left
，bottom
和right
不会影响具有position: static
的元素。

将position
属性设置为static
通常也很有用，即使这就是position
属性的默认值。例如当你想覆盖在其他位置设置的position
值时，可能就会需要执行此操作。

下面有一个例子可以说明position static
对具有此属性的元素没有影响。

<div class="parent-box">
  <div class="box-original">
    <div class="box-1"> </div>
  </div>

  <div class="box-original">
    <div class="box-2"> </div>
  </div>

  <div class="box-original">
    <div class="box-3"> </div>
  </div>
</div>

在上面的示例中，一个具有box-original
类的父容器中包含三个div
。

让我们在box-2
类中添加position: static
，并且给top
和left
设置一些值。

.box-2 {
  position: static;
  top: 10px;
  left: 10px;
  border: 1px solid black;
  background-color: mediumpurple;
  width: 100px;
  height: 100px;
  text-align: center;
  display: inline-block;
  align-self: center;
  margin-left: -1px;
  margin-top: -1px;
}

以下是设置完成后的结果：

看到了没？即使我们使用了position
属性和placement
值，对元素也没有影响。所以，static
值是默认值，并且placement
值不影响具有position: static
的元素。

那么，现在让我们看一下会影响元素在文档流中位置的第一个值。

相对定位

相对位置是指元素在常规布局流中相对于其原始位置进行定位。仅将元素设置为position: relative
不会发生任何变化。我们需要使用placement
属性来更改元素相对于其原始位置如何定位。

基本上，当你将HTML元素设置为position: relative
时，它将保留在布局流中。但是，通过使用placement
属性，你可以移动元素。让我们通过一个例子来加深对相对定位的理解。

我们用position: relative
替换position: static
。

.box-2 {
  position: relative;
  top: 10px;
  left: 10px;
  border: 1px solid red;
  background-color: mediumpurple;
  width: 100px;
  height: 100px;
  text-align: center;
  align-self: center;
  margin-left: -1px;
  margin-top: -1px;
}

更改后的结果如下：

你可以看到紫色正方形元素相对于其最初放置的灰色正方形而定位。在上面的示例中，它原本在常规布局流中的位置应该是距顶部10px
，距左侧10px
。但是，元素保留在文档的常规布局流中，并且相对于其原始位置应用了偏移。在继续讨论其他position
值时，请务必记住这一点。

绝对定位

绝对定位的元素将从常规文档流中删除，并且该元素最初占用的空间不再为该元素保留。

当元素被赋予position: absolute
时，所有其他元素的行为就像该元素不再在文档中一样。因此，在页面布局中没有为该元素保留的空间。如此一来，这就成为了移动HTML元素的强大工具。

有一个重点也是难点，具有position: absolute
的元素相对于其最近位置的祖先元素进行定位。这意味着要使绝对定位正常工作，父元素必须具有除默认static
值以外的position
属性值。

这是要注意的关键点，因为如果最接近的父元素不具有position
属性，则具有绝对位置的元素将相对于下一个具有position
属性值的父元素进行定位。如果没有元素有position属性值，则元素将相对于html
或viewport
元素定位。如果不知道这一点就在文档中定位元素，则会引起很多麻烦。

通过使用placement
属性，我们可以像其他任何CSS position属性一样移动绝对定位的元素。通过top
，left
，bottom
和right
属性，可以确定在具有默认position: static
以外的position属性的层次结构中，元素相对于第一个父元素的放置位置。

让我们回过头再看例子。现在，我们将第二个box
元素的position属性更改为position: absolute
。在查看更改后的结果之前，先检查一下parent-box
元素的位置。

.box-2 {
  position: absolute;
  top: 30px;
  left: 150px;
  border: 1px solid red;
  background-color: mediumpurple;
  width: 100px;
  height: 100px;
  text-align: center;
  align-self: center;
  margin-left: -1px;
  margin-top: -1px;
}

更改后的结果如下：

这里你可以看到在文档中没有为该元素创建任何空间。实际上，空间已经瓦解，其他元素表现得就像这个元素甚至不在页面上一样。这正是因为该元素现在相对于父box元素而定位。

固定位置

固定定位的工作原理与absolute定位类似，从常规文档流中删除，并且元素原来所占用的空间不再为该元素保留。

固定定位的元素相对于视口定位。这意味着当你向下滚动页面时，该元素将保留页面上的原始位置。这通常用于导航栏，这样无论用户在页面上的何处滚动，导航栏保持在页面顶部始终可见。

我们将box-2
的位置从position: absolute
更改为position: fixed
。我们还将将top
属性的值更改为0
并删除left
属性值。再添加其他的一些边框，以便在滚动时显示效果。

.box-2 {
  position: fixed;
  top: 0px;
  border: 1px solid red;
  background-color: mediumpurple;
  width: 100px;
  height: 100px;
  text-align: center;
  align-self: center;
  margin-left: -1px;
  margin-top: -1px;
}

更改后的结果如下：

正如从示例中看到的，紫色框元素现在固定在页面顶部，就像构建了导航栏一样。这是因为我们将position
属性设置为fixed
，并将其从页面的top
设置为0。

当使用具有fixed
值的CSS position属性时，需要特别注意的是，它会占用用户停留页面的整个时间中所指定的视口空间。这可能会影响用户体验，尤其是在屏幕空间有限的移动设备上。因此，使用时要慎重。

粘性定位

粘性定位值根据文档的常规流进行定位，混合了relative定位和fixed定位。也就是说，在页面到达设置的滚动点之前，它都将充当相对定位的元素，之后再充当fixed定位元素。

看一个新示例，当元素到达页面上的某个位置时，它会变为fixed定位元素。我们将为dt
标签赋予position
值sticky
，并为属性top
赋予3px
的值，这意味着距页面顶部3px。

dt {
  background: #007FFF;
  border-bottom: 1px solid yellow;
  border-top: 1px solid yellow;
  color: yellow;
  margin: 0;
  padding: 2px 0 0 12px;
  position: sticky;
  top: -1px;
}

下面就是粘性定位的效果:

在上面的示例中，你可以看到dt
标签（蓝色的）一直停留在页面上直到下一个dt
标签到达为止。一旦到达这个点，下一个dt
标签将变为粘性元素。因此，dt
元素定位在页面的常规流中，但是如果在滚动时到达其位置，则位置将变为固定。然后会一直保持在该位置上，直到随着滚动下一个dt
标签占据固定位置为止。

小心sticky
定位属性，因为到写这篇文章的时候为止，并不是所有浏览器都支持这个属性。

使用z-index

z-index
是一种CSS属性，可用于设置定位元素的z
顺序。这意味着，你使用除static
以外的其他position
属性值设置的任何元素都可以沿着z-index
平面放置。

基本上，z-index
可用于控制这些元素的排序方式以及如何相互重叠。所以本质上，是由你决定哪些元素应该出现在前面，哪些元素应该出现在后面。

具有较大z-index
属性值的元素显示在具有较小z-index
属性值的元素前面。

让我们看下面的示例，我将展示HTML顺序以便说明，如果我们使用z-index
，则顺序无关紧要，我们可以从前到后确定它们的位置。

<div class="parent-box">

    <div class="box box-1">z-index:4</div>
    <div class="box box-2">z-index:1</div>
    <div class="box box-3">z-index:2</div>
    <div class="box box-4">z-index:5</div>
    <div class="box box-5">z-index:3</div>

</div>

然后，我们为每个box
类赋予fixed
，这就允许我们更改每个box
元素的z-index
。这样做的结果如下所示：

从结果中可以看到，大的z-index
元素在前面，小的z-index
元素在后面。

结论

总结一下，CSS position属性是一个功能强大的工具，允许我们通过确定元素如何在页面上放置来更改文档的常规布局流。

其中你需要用到5个position属性。

• Static
• Relative
• Absolute
• Fixed
• Sticky

你可以通过使用top
，left
，bottom
和right
属性和指定元素应移动多少距离来设置元素的位置。

你也可以在z-index
上设置元素的位置，如果为元素提供了position
属性值（默认static
除外）的话。值越大显示在越前面，值越小显示在越后面。

最后说一句，要想彻底掌握CSS position属性，只靠自己多用多练。感谢阅读。