CSS 定位详解

SS 有两个最重要的基本属性，前端开发必须掌握：display和position。

display属性指定网页的布局。两个重要的布局，我已经介绍过了：弹性布局flex^[1]和网格布局grid^[2]。

本文介绍非常有用的position属性。我希望通过10分钟的阅读，帮助大家轻松掌握网页定位，说清楚浏览器如何计算网页元素的位置，尤其是新引进的sticky定位。

本文由国内最大的在线教育平台之一“腾讯课堂”^[3]赞助。他们现在启动了“腾讯课堂101计划”^[4]，推广平台上的课程资源，有不少优质内容。希望提高前端技术水平的同学，可以留意一下本文结尾的免费课程信息。

一、position 属性的作用

position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。

•static•relative•fixed•absolute•sticky

下面就依次介绍这五个值。最后一个sticky是2017年浏览器才支持的，本文将重点介绍。

二、static 属性值

static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。

这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为“正常的页面流”（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。

注意，static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。

三、relative，absolute，fixed

relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。

这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。

3.1 relative 属性值

relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。

它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。

div { position: relative; top: 20px;}

上面代码中，div元素从默认位置向下偏移20px（即距离顶部20px）。

3.2 absolute 属性值

absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。

它有一个重要的限制条件：父元素不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。

/* HTML 代码如下 <div id="father"> <div id="son"></div> </div>*/
#father { positon: relative;}#son { position: absolute; top: 20px;}

上面代码中，父元素是relative定位，子元素是absolute定位，所以子元素的定位基点是父元素，相对于父元素的顶部向下偏移20px。如果父元素是static定位，上例的子元素就是距离网页的顶部向下偏移20px。

注意，absolute定位的元素会被“正常页面流”忽略，即在“正常页面流”中，该元素所占空间为零，周边元素不受影响。

3.3 fixed 属性值

fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。

div { position: fixed; top: 0;}

上面代码中，div元素始终在视口顶部，不随网页滚动而变化。

四、sticky 属性值

sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。

因此，它能够形成“动态固定”的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。

页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。

等到页面重新向上滚动回到原位，工具栏也会回到默认位置。

sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生“动态固定”的效果。原因是这四个属性用来定义“偏移距离”，浏览器把它当作sticky的生效门槛。

它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。

请看下面的示例代码。（注意，除了已被淘汰的 IE 以外，其他浏览器目前都支持sticky。但是，Safari 浏览器需要加上浏览器前缀-webkit-。）

#toolbar { position: -webkit-sticky; /* safari 浏览器 */ position: sticky; /* 其他浏览器 */ top: 20px;}

上面代码中，页面向下滚动时，#toolbar的父元素开始脱离视口，一旦视口的顶部与#toolbar的距离小于20px（门槛值），#toolbar就自动变为fixed定位，保持与视口顶部20px的距离。页面继续向下滚动，父元素彻底离开视口（即整个父元素完全不可见），#toolbar恢复成relative定位。

五、 sticky 的应用

sticky定位可以实现一些很有用的效果。除了上面提到“动态固定”效果，这里再介绍两个。

5.1 堆叠效果

堆叠效果（stacking）指的是页面滚动时，下方的元素覆盖上方的元素。下面是一个图片堆叠的例子，下方的图片会随着页面滚动，覆盖上方的图片（查看 demo^[5]）。

HTML 代码就是几张图片。

<div><img src="pic1.jpg"></div><div><img src="pic2.jpg"></div><div><img src="pic3.jpg"></div>

CSS 代码极其简单，只要两行。

div { position: sticky; top: 0;}

它的原理是页面向下滚动时，每张图片都会变成fixed定位，导致后一张图片重叠在前一张图片上面。详细解释可以看这里^[6]。

5.2 表格的表头锁定

大型表格滚动的时候，表头始终固定，也可以用sticky实现（查看 demo^[7]）。

CSS 代码也很简单。

th { position: sticky; top: 0; }

需要注意的是，sticky必须设在<th>元素上面，不能设在<thead>和<tr>元素，因为这两个元素没有relative定位，也就无法产生sticky效果。详细解释可以看这里^[8]。

（正文完）

免费前端全栈课程

初学者刚接触前端，往往会被一大堆技术名词、框架和工具，搞得眼花缭乱。

到底哪些技术是目前的主流技术栈，既能用于公司的开发实务，又能为自己的简历增添亮点？

下面就是一套目前主流的前端技术栈。

（1）Node.js：服务器端的 JavaScript 运行环境，不管哪种前端开发，都必不可少的底层环境。

（2）Webpack：语法转换工具，把 ES6/TypeScript/JSX 语法转成浏览器可以运行的代码。

（3）Koa2：一个非常流行、简洁强大的 Node.js 后端的 Web 开发框架。

（4）MongoDB：目前应用最广泛的非关系数据库之一，功能丰富，用法较简单。

（5）Vue 全家桶：

•Vue：前端基础框架•Vuex：配套的前端状态管理库。•Vue Router：官方的路由插件，构建单页面应用必不可少。•Vue CLI：脚手架工具，帮你快速上手 Vue 开发，无需再花多余时间去实现项目架构。•Vant：有赞前端团队开发的轻量级移动端 Vue 组件库，让你快速使用已经封装好的各种页面组件。

看到这个名单，你是不是感到有点头大，全部掌握它们需要多少时间啊？

现在，腾讯课堂就有一门这样的课程，内容包含了所有这些工具，教你怎么用它们从头完成一个全栈项目，亲手做出一个手机端的移动商城，是由 慕课网的精英讲师--谢成老师讲授。

该课程的制作单位是青盟科技。它是《腾讯课堂101计划》重点推广的优质机构，已有7年 IT 行业教学经验，培养收费学员2000+，有超过72%的学员都进入到名企大厂。如果你想了解课程的详细内容，获取课程大纲，或者想接受系统的前端培训，可以登录腾讯课堂查看“青盟科技”。

（完）

References

[1]弹性布局flex:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[2]网格布局grid:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

[3]“腾讯课堂”:https://ke.qq.com/?utm=ruanyifeng

[4]“腾讯课堂101计划”:https://edu.qq.com/a/20190119/005414.htm

[5]demo:https://jsbin.com/fegiqoquki/edit?html,css,output

[6]这里:https://dev.to/vinceumo/slide-stacking-effect-using-position-sticky-91f

[7]demo:https://jsbin.com/decemanohe/edit?html,css,output

[8]这里:https://css-tricks.com/position-sticky-and-table-headers/

SS中通常使用position 属性，决定元素的定位方式。

常用的定位方式通常有

值	意义
relative	相对定位
absolute	绝对定位
fixed	固定定位

相对定位

position 设置为 relative。

相对定位是元素相对于自己原来的位置通过使用top、left 等属性进行移动，使其显示在新的位置上。

相对定位的元素虽然移动了，但是之前的位置并没有放弃，同时也不会抢占移动后原有元素的位置(但会对原有位置的元素进行压盖)。

相对定位通常用来微调元素位置；而且相对定位可以作为下面要讲的绝对定位的参考坐标。

属性	值	作用
top	像素、百分比等	相对原来位置，距离上边移动距离，可以为负值
left	像素、百分比等	相对原来位置，距离左边移动距离，可以为负值
right	像素、百分比等	相对原来位置，距离右移动距离，可以为负值
bottom	像素、百分比等	相对原来位置，距离下边移动距离，可以为负值。

相对定位举例

像素描述位置

box2 开启了相对定位，在新的位置得到了渲染。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>相对定位概念</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      p {
        width: 100px;
        height: 100px;
        background-color: orange;
        border: 1px solid #000;
      }


      .box2 {
        position: relative;
        top: 102px;
        left: 102px;
      }
</style>
  </head>
  <body>
    <p></p>
    <p class="box2"></p>
    <p></p>
  </body>
</html>

百分比形式

如果在相对定位中， top、left、bottom、right 写成百分比的形式，表示他们在父容器内所显示的百分比位置。

举例

父元素宽高均200px。开启子元素相对定位，则子元素位置如下。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>相对定位概念</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 40px auto;
      }


      p {
        position: relative;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: orange;
      }
</style>
  </head>
  <body>
    <div>
      <p></p>
    </div>
  </body>
</html>

绝对定位

position 设置为 absolute。

绝对定位的元素在浏览器中拥有绝对位置，可以通过坐标进行描述。

绝对定位的元素脱离标准文档流，释放了自己本来应该在的地方的位置；同时会在新的位置上对其他元素进行压盖。

绝对定位的元素会在自己祖先元素中寻找拥有定位属性的元素作为参考点。这个祖先元素通常是相对定位的。

绝对定位的元素如果找不到拥有定位属性的祖先元素作为参考点，则相对于 IBC（初始包含块，可以认为是HTML根元素）定位。

属性	值	作用
top	像素、百分比等	相对参考点位置，距离参考点上边移动距离，可以为负值
left	像素、百分比等	相对参考点位置，距离参考点左边移动距离，可以为负值
right	像素、百分比等	相对参考点位置，距离参考点右边移动距离，可以为负值
bottom	像素、百分比等	相对参考点位置，距离参考点下边移动举例，可以为负值。

举例

参考点IBC

参考点是IBC,此时的top、left、bottom、right都是通过HTML跟节点来描述元素的位置。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绝对定位释放自己位置的示例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
      }
      .box1 {
        background-color: orange;
      }
      .box2 {
        background-color: green;
        position: absolute;
        top: 230px;
        left: 200px;
      }
      .box3 {
        background-color: blue;
      }
</style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <ul>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
    </ul>
  </body>
</html>

参考点是定位元素

最经典的就是，父节点开启相对定位，子元素开启绝对定位；此时的top、left、bottom、right都是通过父元素的位置描述子元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>子绝父相</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 402px;
        height: 402x;
        border: 1px solid #000;
        padding: 100px;
        margin: 0 auto;
        position: relative;
      }


      .box2 {
        width: 200px;
        height: 200px;
        padding: 50px;
        border: 1px solid #000;
        position: relative;
      }


      .box3 {
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: orange;
      }
</style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">
        <div class="box3">dual</div>
      </div>
    </div>
  </body>
</html>

固定定位

position 设置为 fixed。

不管页面如何下拉，元素永远固定在一个位置。

固定定位只以页面为参考点，并且同样也脱离了标准的文档流。

固定定位用途：

用于页面内容比较长，返回顶部功能等。
用于制作CSS精灵 (现在很少用了)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位demo</title>
    <style>
        .box {
            position: fixed;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: red;
        }


        body {
            height: 100000px;
        }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

层叠属性

对于上述说的定位元素，他们都有可能压盖到渲染后的位置上的原有元素。某些场景下我们不希望此事发生。

此时就用到了 z-index属性。它的值是一个正整数，值越大会越在上面显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index属性演示</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: orange;
            position: absolute;
            top:100px;
            left: 100px;
            z-index: 2;
        }


        .box2 {
            width: 300px;
            height: 300px;
            background-color: green;
            position: absolute;
            z-index: 10;
        }
</style>
</head>
<body>


    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

总结

相对定位：相对于自己原来的位置进行定位。

绝对定位：选一个参考点进行定位。参考点可以是拥有定位属性的祖先元素，如果找不到，则为IBC。

固定定位：在页面（可视化的屏幕）的固定位置，不随着页面滚动而滚动。

、定位

本章目标：

会使用position定位网页元素
会使用z-index属性调整定位元素的堆叠次序

5.1、定位在网页中的应用

在这里插入图片描述

在线咨询

上一篇：肖sir_html之基本使用（1）
下一篇：5个不常提及的HTML技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商