5分钟掌握CSS定位

2025-05-25

5分钟掌握CSS定位

页面元素定位能力是每个 Web 开发者必备的技能。然而，我发现即使是经验丰富的开发者也常常会遇到一些问题，或者会立即在 Google 上搜索。但只要你花时间掌握，读完这篇文章后，你就会成为一名CSS 定位高手⚔️。

视频教程

如果您更喜欢以视频​​格式观看，我在我的YouTube 频道上创建了一个教程，其中我通过一个生动的例子进行了解释：

位置 CSS 属性

该position属性告诉浏览器元素在页面上的定位方式。默认情况下，position 的值为static，但我们可以将其修改为以下任意值：relative、absolute、fixed、sticky。在本文中，我将逐一介绍这些值。

基本示例

我们将使用一段非常简单的 HTML 代码，以便于理解。它包含一个容器 div 和 3 个子 div，我们将在整个示例中放置它们。
我还为这些子 div 添加了不同的颜色，以便更容易区分它们。



<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <title>CSS positions</title>
    <style>
      .container {
        background-color: lightblue;
        padding: 20px;
      }

      .container > div {
        padding: 15px;
      }

      .container span {
        margin-bottom: 20px;
      }

      .first {
        background-color: lightgreen;
      }

      .second {
        background-color: lightcoral;
      }

      .third {
        background-color: lightgoldenrodyellow;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <span>Container</span>
      <div class="first">First</div>
      <div class="second">Second</div>
      <div class="third">Third</div>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

ℹ️ 如果您想试用代码，请随意使用此CodeSandbox 链接。

静止的

这是position属性的默认值。如果元素的位置是静态的，则该元素将根据其在原始文档流中的位置按顺序渲染。

它看起来是这样的：
静态定位

相对的

如果我们将元素的位置设置为相对，它将像默认使用静态一样显示在文档中。诀窍在于，通过设置相对位置，我们可以访问以下 CSS 属性：top、left、right、bottom。通过这些属性，我们可以向特定方向添加偏移量。例如，如果我们设置left: 20px。元素将放置在右侧 20 像素处。如果我们设置为 -20px，则会将内容向左移动 20px。

进行以下更改：



.second {
        background-color: lightcoral;
        position: relative;
        left: 20px;
      }
Enter fullscreen mode Exit fullscreen mode

我们得到这个结果：
使用位置：相对

固定的

使用固定定位，我们还可以访问top、left、right、bottom属性。在这种情况下，元素相对于浏览器窗口的视口进行定位。

因此，如果我们将固定定位元素的顶部设置为 70px，左侧设置为 20px，它将出现在距视口顶部 70px 的位置，距视口左边缘 20px 的位置。固定定位还会将文档从正常的文档流中移除。

修改CSS：



.second {
        background-color: lightcoral;
        position: fixed;
        left: 20px;
        top: 70px;
      }
Enter fullscreen mode Exit fullscreen mode

我们得到这个结果：
固定定位结果

绝对

绝对定位可能会让开发者感到困惑。它的工作方式类似于固定定位，但并非相对于视口定位，而是基于最近的已定位元素（该元素的定位方式不是static）进行定位。如果没有父元素定位，它将相对于视口进行定位（结果与 相同fixed）。

对 CSS 进行以下更改：



.second {
        background-color: lightcoral;
        position: absolute;
        left: 20px;
        top: 70px;
      }
Enter fullscreen mode Exit fullscreen mode

我们得到与位置相同的结果fixed：
父级未定位的绝对位置

如果我们为父元素添加一个位置值，在本例中，我们会将其添加到容器 div 中，绝对定位的子元素将相对于该 div 进行定位。我们通常对父元素使用相对定位，因为它不会将其从标准文档流中移除，并且父元素将放置在没有 div 时它应该在的位置position: relative。

添加相对于容器的位置：



.container {
        background-color: lightblue;
        padding: 20px;
        position: relative;
      }
Enter fullscreen mode Exit fullscreen mode

结果如下：
相对于父级的绝对定位

黏

使用sticky将根据用户的滚动位置来定位我们的元素。它会在relative和 之间切换fixed。我们可以使用top、left、right、来提供偏移量bottom。在达到指定的偏移量之前，元素的行为类似于相对定位元素；但是，当滚动位置大于偏移量时，它会“切换”为固定位置，并相对于视口进行定位。它保持固定位置，直到用户向相反方向滚动，并且距离小于偏移量，然后它再次恢复为相对定位元素。

为了能够滚动，将视口高度的 3 倍添加到我们的容器：



.container {
        background-color: lightblue;
        padding: 20px;
        height: 300vh;
      }
Enter fullscreen mode Exit fullscreen mode

为元素添加粘性位置和顶部偏移：



.second {
        background-color: lightcoral;
        position: sticky;
        top: 0;
      }
Enter fullscreen mode Exit fullscreen mode

结果：
粘性定位

现在，页面默认看起来就像我们什么都没做一样。但是如果我们向下滚动到第二个 div 下方，它会直接粘在顶部（因为偏移量为 0px，如果需要可以增加），并随着内容在该固定位置滚动。如果我们滚动回顶部，它会回到原来的位置。

这就是您像专业人士一样在网页上定位元素所需要的一切。

如果您想了解更多信息，请考虑在其他平台上关注我👇。

您可以在哪里向我了解更多信息？

我创建了涵盖多个平台上的 Web 开发的教育内容，请随意查看。

我还创建了一个简报，分享我创作的一周或两周的教育内容。不废话💩，只讲教育内容。

🔗 链接：

文章来源：https://dev.to/javascriptacademy/master-css-positioning-in-5-minutes-2n18
Devto 翻译
PREV
React 面试问题解答与解释 #1
NEXT
Web 开发人员作品集 20 个激发灵感的开发人员作品集 🤩