CSS3中的 Position 定位详细讲解

来源：喔唷网编辑：喔唷教程时间：2025-04-07 浏览：

在CSS3的编程中往往离不开布局的定位，今天我们主要来学习position的定位模式和使用方法position是CSS中用于控制元素定位方式的重要属性，它决定了元素在文档流中的定位方式以及与其它

CSS3中的position属性详解

position是CSS中用于控制元素定位方式的重要属性，它决定了元素在文档流中的定位方式以及与其它元素的位置关系。position的取值有5个类型分别是

position的属性	参数	作用域
static (默认值)	position: static;	元素按照正常的文档流进行排列，忽略top、bottom、left、right和z-index属性，这是所有元素的默认定位方式。
relative (相对定位)	position: relative;	元素先放置在未添加定位时的位置，然后可以通过top、right、bottom和left属性相对于其正常位置进行偏移，不会影响其他元素的位置（其他元素会认为它仍在文档流中原来的位置）。
absolute (绝对定位)	position: absolute;	元素脱离正常文档流相对于最近的非static定位的祖先元素进行定位，如果没有这样的祖先元素，则相对于初始包含块（通常是html元素）定位，可以使用top、right、bottom和left属性精确控制位置。
fixed (固定定位)	position: fixed;	元素脱离正常文档流相对于浏览器窗口（视口）进行定位，即使页面滚动，元素位置也不会改变常用于创建固定导航栏、返回顶部按钮等。
sticky (粘性定位)	position: sticky;	混合了relative和fixed定位的特性元素在跨越特定阈值前为相对定位，之后为固定定位必须指定top、right、bottom或left至少一个阈值才能使粘性定位生效。常用于创建滚动时固定在顶部的标题。

以上是position的五种定位属性，掌握了这些定位规范我们就能在网页的开发中精准的定位块。下面我们分别从五个例子来展示每个定位的方法。

<html>
    <head>
        <style>
            html,body{
                margin: 0;
                padding: 0;
            }
            .box {
                width: 200px;
                height: 100px;
                background-color: aqua;
                }

            .main{
                width: 200px;
                height: 100px;
                background-color: red;
                position: relative;
                top: 20;
                left: 10;
            }
        </style>
    </head>
    <body>
        <div class="box">这是一个展示定位的盒子。</div>
        <div class="main">我是比较的盒子</div>
    </body>
</html>

从上面例子我们观察到，标签<div class="main">我是比较的盒子</div>距离页面左边相差了10的距离，距离页面头部相差了20距离。然而<div class="box">并没有任何变化。说明position: relative;相对定位是不会影响其他元素的位置。

<html>
    <head>
        <style>
            html,body{
                margin: 0;
                padding: 0;
            }
            .box {
                width: 200px;
                height: 100px;
                background-color: aqua;
                }

            .main{
                width: 200px;
                height: 100px;
                background-color: red;
                position: absolute;
                top: 20;
                left: 10;
            }
        </style>
    </head>
    <body>
        <div class="box">这是一个展示定位的盒子。</div>
        <div class="main">我是比较的盒子</div>
    </body>
</html>

通过运行上面代码我们可以看到，<div class="main"> 的盒子相对于body标签的top留了20的距离。相对于body标签的左边留了10的距离。整个class="main"的<div>标签盒子基本压住了 .box 的盒子。由此可见class="main"的这个<div>元素脱离正常文档流相对于最近的非static定位的祖先元素进行定位。

<html>
    <head>
        <style>
            html,body{
                margin: 0;
                padding: 0;
            }
            .box {
                width: 200px;
                height: 2000px;
                background-color: aqua;
                }

            .main{
                width: 200px;
                height: 100px;
                background-color: red;
                position: fixed;
                top: 20;
                left: 10;
            }
        </style>
    </head>
    <body>
        <div class="box">这是一个展示定位的盒子。</div>
        <div class="main">我是比较的盒子</div>
    </body>
</html>

以上代码展示了fixed (固定定位)的使用方法，我们通过实例可以看到fixed定位是针对于整个浏览器定位，它的元素脱离正常文档流。我们拖动浏览器滚动条向下滚动发现，class="main" 的这个盒子并没有发生位置的移动。

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    height: 2000px; /* 为了演示滚动 */
    margin: 0;
    font-family: Arial;
  }
  
  .sticky-nav {
    position: sticky;
    top: 0; /* 当滚动到顶部0px时固定 */
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
  }
  
  .content {
    padding: 20px;
  }
</style>
</head>
<body>
  <div class="content">
    <h1>向下滚动查看粘性导航栏效果</h1>
    <p>页面内容...</p>
  </div>
  
  <div class="sticky-nav">
    我是粘性导航栏 - 滚动时会固定在顶部
  </div>
  
  <div class="content">
    <p>更多内容...</p>
    <p>继续滚动...</p>
  </div>
</body>
</html>

粘性定位sticky，是一个使用范围比较广的而且比较新的一个定位方式。粘性定位sticky的作用是在超出指定位置后及可停留在当前位置。案例中我们设置了[.sticky-nav]这个容器的top为0 。通过滚动浏览器的下拉条，当[.sticky-nav]这个容器的top为0的时候它即停止了滚动并且相对于浏览器悬浮了起来。这个功能不仅非常适用于网页的导航和表格的表头而且粘性定位也适合创建滚动时保持可见的UI元素，如导航栏、表头、侧边栏等，能显著提升用户体验。只是粘性定位的兼容性较新，需要考虑浏览器支持情况。

增强学习，为什么绝对定位元素的祖先需要设置定位属性

当使用 position: absolute; 时，元素会相对于最近的已定位祖先元素进行定位。这里的"已定位"指的是该祖先元素的 position 属性设置为 relative、absolute、fixed 或 sticky 中的任意一个（即非 static 的定位值）。1. 定位参考基准的确定默认情况：如果所有祖先元素都是 position: static（默认值），那么绝对定位的元素会相对于初始包含块（通常是视口或HTML元素）进行定位设置定位后：当祖先元素设置了非 static 的定位，它就成为了该绝对定位元素的包含块(containing block)，所有定位计算都相对于这个祖先。我们用实际案例对比。

<style>
  .container1 {
    /* 没有设置定位 */
    width: 300px;
    height: 200px;
    border: 2px solid blue;
    margin: 50px;
  }
  
  .container2 {
    position: relative;  /* 设置了relative定位 */
    width: 300px;
    height: 200px;
    border: 2px solid red;
    margin: 50px;
  }
  
  .absolute-box {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
    background: yellow;
  }
</style>

<div class="container1">
  未定位容器
  <div class="absolute-box"></div>
</div>

<div class="container2">
  已定位容器
  <div class="absolute-box"></div>
</div>

在这个例子中：第一个黄色方块会相对于视口定位（可能跑到页面左上角）。第二个黄色方块会相对于红色边框的容器定位。由此我们可以看到，要想 absolute 定位更加准确我们给它的父级设置relative定位是非常正确的。这样的好处有以下四点：

建立明确的定位参考系。
实现更精确的局部定位控制。
避免元素意外地相对于视口定位。
创建自包含的布局组件。