理解 CSS 定位的轻松指南

如果你想真正精通 CSS，理解 CSS 的 Position 属性至关重要。然而，对于初学者来说，这可能是最令人沮丧的经历之一。

在构建我的开发者作品集时，我发现自己其实不太理解 CSS 的 Position 属性，只是随意尝试了不同的 Position 组合，直到找到自己满意的为止。但大多数时候，结果都很糟糕，让我抓狂不已。

在本文中，我将尝试帮您摆脱不知道如何使用position属性的困扰。您将学习CSS位置属性的每个值是如何工作的，从而真正精通CSS。

要理解位置属性和相关值，我们首先需要确保我们了解元素在网页上的定位方式。

流程布局

元素在页面上的定位方式称为常规流，或流式布局。它是元素在页面上默认的显示方式。基本上，流是页面上所有元素的集合，它们协同工作，并且每个元素都了解其他所有元素。

现在，CSS 将每个 HTML 元素视为其自身的盒子，您可能听说过这种称为盒子模型的模型。块级元素（例如标题、段落或 div）默认从新行开始，而行内元素（图像或 span）则位于同一行的周围内容中。这种元素的默认布局称为文档的正常流，但 CSS 提供了一个强大的工具，即position属性，用于覆盖正常流。

让我们看看位置属性的作用。

位置属性

CSS 的position属性用于设置元素在文档中的定位方式。我们可以使用它来根据你赋予position属性的值来确定各个元素的定位方式。

位置属性有五个值。

1. Static
2. Relative
3. Absolute
4. Fixed
5. Sticky

我们将介绍所有这 5 个值，但在此之前，我们需要了解放置属性以及它们如何影响定位。

放置属性

位置属性本身作用不大。我们需要使用位置属性（只是我这么叫，不是官方名称）来告诉文档元素应该放在哪个位置。有四个主要属性可以做到这一点。

1. Top
2. Left
3. Right
4. Bottom

这些属性分别定义了元素位置相对于默认值的调整幅度以及调整方向。通过查看下面的位置值和示例，我们会更清楚地了解这些属性的工作原理。

位置属性值

静态定位

静态定位是位置属性的默认值。也就是说，页面上的元素会按照正常流的预期顺序显示。位置属性、 和top不会left影响具有 的元素。bottomrightposition: static

即使位置属性是默认值，将其设置为静态通常也很有用。例如，当您想要覆盖在其他地方设置的位置值时，就可能需要这样做。

让我们看一个例子，看看这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>

在上面的例子中，我们有三个divs，每个都在一个具有类的父容器中box-original。

让我们position: static为 div 添加类box-2，并赋予它 boxtop和 的一些值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值，它对元素也没有任何影响？现在你知道了，staticposition属性是默认值，并且不会影响元素position: static。

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

相对定位

相对定位是指元素相对于其在正常流中的原始位置进行定位。仅将元素设置为position:relative不会有任何效果。我们需要使用placement属性来更改元素相对于其原始位置的定位方式。

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

我们将用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: absolute所有其他元素的行为都如同该元素已不在文档中一样。因此，页面布局中不会为该元素保留任何空间。这可以成为移动 HTML 元素的强大工具。

学习过程中一个很重要且让我困惑的地方是，带有 的元素position: absolute是相对于其最近的父元素进行定位的。这意味着，要使绝对定位起作用，父元素必须具有除默认值 之外的position属性值static。

这一点至关重要，因为如果最近的父元素没有position属性，则具有绝对位置的元素将相对于下一个具有position属性值的父元素进行定位。如果没有元素具有position属性值，则该元素将相对于html或viewport元素进行定位。不了解这一点，在尝试定位文档中的元素时会非常麻烦。

我们可以像使用其他 CSS 位置属性一样，使用 位置属性来移动绝对定位元素。使用top、left和属性，可以确定元素相对于层次结构中第一个具有除默认 之外的 位置属性的父元素的放置位置。bottomrightposition: static

让我们回到之前的例子。现在我们要将第二个盒子元素的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;
}

变更结果如下。

在这里，你会看到文档中没有为该元素创建任何空间。实际上，该空间已经折叠，其他元素看起来就像它根本不在页面上一样。这是因为该元素现在是相对于父框元素定位的。

固定定位

固定定位的工作方式与absolute定位类似，它从正常的文档流中移除，并且元素原来占用的空间不再为该元素保留。

固定定位元素是相对于视口 (viewport)进行定位的。这意味着，当您向下滚动页面时，元素仍会停留在页面上的原始位置。这通常用于导航栏，无论用户在页面上滚动到哪里，导航栏始终显示在页面顶部。

我们将把 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距离设置为0 。top

使用 CSS 位置属性时，fixed务必注意，它会在用户停留在页面上的整个过程中占用您指定的视口空间。这会影响用户体验，尤其是在屏幕空间有限的移动设备上。因此，请务必考虑如何在所有设备上使用媒体查询。

粘性定位

粘性定位值是根据文档的正常流程进行定位的，但它也是位置relative和位置的混合fixed。我的意思是，它表现为相对定位元素，直到页面到达设定的滚动点，它才会表现为fixed位置元素。

让我们看下面的新示例，看看当元素到达页面上的某个位置时，它会变为一个fixed位置元素。我们将为该dt标签指定位置值，并为其指定一个值为 的sticky属性，该属性表示该元素距离页面顶部 3px。top3px

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标签的位置。到达该位置后，下一个dd标签将成为粘性元素。因此，这些dt元素会按照页面的正常流程进行定位，但当您滚动到达其位置时，其位置将固定。它会粘着在该位置，并在滚动过程中保持不动，直到下一个dt标签占据固定位置。

谨慎使用sticky定位属性，因为在撰写本文时，它尚未被所有浏览器普遍支持（那些讨厌的 IE 用户）。您可以随时访问caniuse.com来检查某些属性是否受支持。

Z-index 适合在哪里

Z-index 是一个 CSS 属性，用于设置定位元素的 Z 轴顺序。这意味着，任何使用除 之外的 Position 属性值的元素都static可以沿 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这样我们就可以更改每个框元素的 z-index 值。执行结果如下。

从结果中可以看出，较高的z-index元素在前面，较低的元素在后面。

结论

总结一下我们所学的内容。CSS 的position属性是一个强大的工具，它通过确定元素在页面上的放置方式，可以改变文档的正常流程。

您有五个位置属性可供使用。

• 静止的
• 相对的
• 绝对
• 固定的
• 黏

top您可以使用、left和属性并指定元素与该点bottom的right距离来设置元素的位置。

如果您为元素指定了除默认值以外的position属性值，则还可以设置元素在z-index上的位置static。值越高的元素显示在前面，值越低的元素显示在后面。

掌握 CSS 位置属性的最好方法就是多尝试。试试我这里用到的笔，通过给每个属性赋予不同的值或修改父元素来尝试不同的效果。

如果您从这篇文章中获得了价值，我将非常感激您查看我网站上的其他内容或在推特上关注我。