CSS 定位详解：从文档流到五种定位方式

在网页设计与开发中，CSS 定位是控制元素布局的核心技术之一。理解不同的定位方式及其对文档流的影响，对于创建复杂且响应式的页面布局至关重要。本文将深入探讨 CSS 中的五种定位方式：static、relative、absolute、fixed 和 sticky，并通过具体代码示例解析它们的行为特性。

文档流基础

在深入探讨定位之前，我们需要理解文档流（Normal Flow）的概念。文档流是 HTML 元素默认的布局方式：块级元素垂直排列，行内元素水平排列，遵循从上到下、从左到右的自然顺序。

当元素处于文档流中时，它们按照在 HTML 中的出现顺序进行布局。然而，某些 CSS 属性（如定位）可以使元素"离开文档流"，从而改变这种默认行为。

相对定位（Relative Positioning）

相对定位是 CSS 中最基础的定位方式之一。通过设置 position: relative，元素可以根据其在文档流中的原始位置进行偏移。

html

复制下载运行

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Relative 相对定位</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .parent{
      width: 500px;
      height: 500px;
      background: pink;
      position: relative;
      left: 100px;
      top: 100px;
    }
    .child{
      width: 300px;
      height: 200px;
      background: gold;
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: greenyellow;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="box"></div>
</body>
</html>

在这个示例中，.parent 元素设置了 position: relative 并向右和向下各偏移了 100px。相对定位的关键特性是：

相对自身定位：元素相对于其在文档流中的原始位置进行偏移
不脱离文档流：元素仍然占据原来的空间，不会影响其他元素的布局
可使用偏移属性 ：可以使用 top、right、bottom 和 left 属性进行精确控制

相对定位常用于微调元素位置，或作为绝对定位子元素的参考容器。

绝对定位（Absolute Positioning）

绝对定位使元素完全脱离文档流，不再占据原来的空间。绝对定位的元素需要参考一个具有定位属性（非 static）的祖先元素。

html

复制下载运行

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>absolute 绝对定位</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: azure;
    }
    .parent {
      opacity:1;
      width: 550px;
      height: 500px;
      background-color: hotpink;
      position:relative;
    }
    .child{
      width: 300px;
      height: 200px;
      background-color: skyblue;
      position: absolute;
      right: 100px;
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: turquoise;
      position:absolute;
      left: 50%;
      top: 50%;
      transform:translate(-50%,-50%);
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
    <div>123</div>
  </div>
  <div class="box">Hello World</div>
  <div>456</div>
</body>
</html>

在这个示例中，我们看到了两种绝对定位的应用：

子元素相对于父元素定位 ：.child 元素设置了 position: absolute 和 right: 100px，它相对于设置了 position: relative 的 .parent 元素进行定位。
相对于视口定位 ：.box 元素也设置了 position: absolute，但由于没有定位的祖先元素，它相对于视口进行定位。通过 left: 50% 和 top: 50% 将其左上角定位在视口中心，再通过 transform: translate(-50%, -50%) 将其自身中心点对准视口中心。

绝对定位的关键特性：

脱离文档流：元素不再占据空间，后续元素会填补其位置
参考最近的定位祖先：元素相对于最近的非 static 定位祖先进行定位
无定位祖先时参考视口：如果没有定位祖先，则相对于初始包含块（通常是视口）定位
不响应文档滚动：除非其定位祖先滚动

固定定位（Fixed Positioning）

固定定位类似于绝对定位，但它总是相对于浏览器视口进行定位，即使页面滚动，元素也会保持在固定位置。

html

复制下载运行

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fixed</title>
  <style>
    *{
      margin: 0;
      padding: 0; 
    }
    body{
      height: 2000px;
    }
    .parent{
      width: 550px;
      height: 500px;
      background-color: green;
    }
    .child{
      width: 300px;
      height: 200px;
      background-color: blue;
      position: fixed;
      right: 100px;
      bottom: 100px;
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="box"></div>
</body>
</html>

在这个示例中，.child 元素设置了 position: fixed，并定位在视口右下角 100px 处。即使页面滚动，该元素也会保持在固定位置。

固定定位的关键特性：

相对于视口定位：总是相对于浏览器窗口进行定位
脱离文档流：不占据空间，不影响其他元素布局
不随页面滚动：页面滚动时元素保持固定位置
常用于固定导航、广告等：适合需要始终可见的界面元素

粘性定位（Sticky Positioning）

粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

html

复制下载运行

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 2000px;
    }
    .parent{
      width: 500px;
      height: 500px;
      background-color: palegreen;
    }
    .child{
      width: 300px;
      height: 200px;
      background-color: orange;
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: brown;
      position:sticky;
      top:100px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="box">
    153
  </div>
</body>
</html>

在这个示例中，.box 元素设置了 position: sticky 和 top: 100px。当页面滚动时，该元素会正常滚动直到距离视口顶部 100px 的位置，然后变为固定定位，保持在该位置。

粘性定位的关键特性：

混合定位模式：在阈值前为相对定位，跨越阈值后为固定定位
相对于最近滚动祖先：元素相对于最近的滚动祖先进行定位
需要指定阈值 ：必须指定至少一个 top、right、bottom 或 left 值
常用于粘性导航、标题等：适合需要在滚动时保持可见但又不一直固定的元素

静态定位（Static Positioning）

静态定位是元素的默认定位方式，元素按照正常的文档流进行布局。

html

复制下载运行

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .parent{
      width: 500px;
      height: 500px;
      background-color: pink;
      left: 100px;
      position: absolute;
    }
    .child{
      width: 300px;
      height: 200px;
      background-color: blue;
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="box">
    153
  </div>

  <script>
    const oParent = document.querySelector('.parent');
    setTimeout(() => {
      oParent.style.position = 'static';
    },2000);
  </script>
</body>
</html>

在这个示例中，.parent 元素初始设置为 position: absolute，但 2 秒后通过 JavaScript 变为 position: static。当变为静态定位后，left: 100px 属性将不再生效，因为静态定位的元素不接受偏移属性。

静态定位的关键特性：

默认定位方式：所有元素的默认定位方式
忽略偏移属性 ：top、right、bottom 和 left 属性无效
正常文档流：元素按照正常的文档流进行布局
用于取消定位：可用于覆盖其他定位方式，使元素回到正常文档流

定位与元素显示

在 CSS 中，有多种方式可以隐藏元素，但它们的行为有所不同：

display: none：完全隐藏元素，不占用空间，不会影响其他元素的布局
opacity: 0：使元素完全透明，但仍然占用空间，会影响其他元素的布局
visibility: hidden：隐藏元素，但仍然占用空间，但不会响应鼠标事件

在定位上下文中，这些属性的选择会影响布局结果。例如，使用 opacity: 0 隐藏的定位元素仍然会占据其定位空间，而使用 display: none 则完全从布局中移除。

总结

CSS 定位是网页布局的核心技术，理解不同定位方式的行为特性对于创建复杂且响应式的页面至关重要。相对定位用于微调，绝对定位用于精确控制，固定定位用于创建固定元素，粘性定位用于滚动时的粘性效果，而静态定位则是默认的文档流布局。