性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如:

.sticky-header {
  position: sticky;
  top: 10px; 
}

在 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下。

粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上。这样，用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体验。

粘性定位看着很简单，但也很容易出现不生效的情况。为帮助大家彻底理解粘性定位，本文会从 3 个方面来介绍：

• 粘性定位的原理。
• 不生效的情况。
• 具体的例子。

原理

为便于理解粘性定位，这里引入四个元素：视口元素，容器元素，粘性约束元素 和 sticky 元素。它们的关系如下：

视口元素：显示内容的区域。会设置宽，高。一般会设置 overflow:hidden。
容器元素：离 sticky 元素最近的能滚动的祖先元素。
粘性约束元素：粘性定位的父元素。有时，也会出现粘性约束元素就是容器元素的情况。
sticky 元素：设置了 position: sticky; 的元素。

滚动时，sticky 元素设置的 left, right, top, bottom 的值相对的是容器元素。当粘性约束元素滚出视口时，sticky 元素也会滚出视口。

不生效的情况

情况1: 未指定 top, right, top 和 bottom 中的任何一个值

此时，设置 position: sticky 相当于设置 position: relative。

要生效，要指定 top, right, top 或 bottom 中的任何一个值。

情况2: 垂直滚动时，粘性约束元素高度小于等于 sticky 元素高度

不生效的原因：当粘性约束元素滚出视口时，sticky 元素也会滚出视口。粘性约束元素比 sticky 元素还小，sticky 元素没有显示固定定位状态的机会。

同样的，水平滚动时，粘性约束元素宽度小于等于 sticky 元素宽度时，也不会生效。

情况3: 粘性约束元素和容器元素之间存在 overflow: hidden 的元素

该情况的示例代码:

<div class="viewport">
  <div class="container"> <!-- 容器元素 -->
    <div style="overflow: hidden">
      <div> <!-- 粘性约束元素 -->
        <div class="stick-elem">...</div>  <!-- sticky 元素 -->
        ...
      </div>
    </div>
  </div>
</div>

要生效，要把 overflow: hidden 的元素移除。

具体的例子

例子1: 页面滚动

这个例子，我们来实现页面滚动到文章内容时，文章标题吸顶的效果。

HTML 结构如下：

<div class="header">网站头部</div>
<!-- 粘性约束元素 -->
<div class="article">
  <!-- sticky 元素 -->
  <h2 class="title">彻底理解粘性定位 - position: sticky</h2>
  <div class="content">...</div>
</div>
<div class="footer">网站底部</div>

在这个例子中，视口元素和容器元素都是 body。sticky 元素是 .title，因此只要在 sticky 元素上设置如下样式即可:

.title {
  position: sticky;
  top: 0;
  background-color: #fff;
}

例子2: 文章列表

这个例子，我们来实现一块区域下有多篇文章，区域滚动到文章内容时，对应的标题和操作按钮吸顶的效果。

HTML 结构如下：

<!-- 视口元素 -->
<div class="viewport">
  <!-- 容器元素 -->
  <div class="container">
    <!-- 文章:粘性约束元素 -->
    <div class="article">
      <div class="sticky-header">
        <h2>彻底理解粘性定位 - position: sticky</h2>
        <div class="options">
          <button>转发</button>
          <button>点赞</button>
        </div>
      </div>
      <div class="article-content">...</div>
  </div>
  <!-- 文章 -->
  <div class="article">...</div>
  <div class="article">...</div>
</div>

在这个例子中，视口元素是 .viewport，容器元素是 .container。sticky 元素是 .sticky-header。核心样式如下:

/* 视口元素 */
.viewport {
  width: 50%;
  overflow: hidden;
  height: 200px;
}
/* 容器元素 */
.container {
  overflow: auto;
  height: 100%;
}
/* 粘性约束元素 */
.article {
  margin-bottom: 10px;
}
/* sticky 元素 */
.sticky-header {
  position: sticky;
  top: 0;
  padding: 5px 0;
  background-color:#fff;
}

例子3: 甘特图

最后，我们来做个复杂点的例子：甘特图。如下图所示：

需要实现：

• 左侧事项菜单总在最左侧。
• 菜单的头部和时间轴吸顶。
• 时间轴的年总在月的最左边。

Web前端开发-CSS入门干货01 、Web前端开发-CSS入门干货02 、Web前端开发-CSS布局-盒子模型入门干货 介绍了CSS重要基础概念选择器和字体系列、文本系列、背景系列样式以及CSS布局中元素的盒子模型，下面介绍CSS布局中另外两个重要应用浮动和定位。

根据元素浮动、定位的特性可以将CSS布局分为三种：标准流、浮动流、定位流；

其中标准流是利用块级元素独占一行、自上而下，行内元素一行显示、遇到阻碍自动换行、自左向右的布局方式。

1.浮动

（1）什么是浮动

元素脱离原先位置，不再占据空间，相对于未浮动元素类似漂浮在其上面；

浮动元素具有了行内块元素特性，并实现贴边布局。这里的边可以是父级元素的边也可以是同样浮动的兄弟级元素的边。

（2）浮动解决的问题

改变块级元素默认的垂直布局方式，改为横向布局。

行内块样式（display: inline-block;）也可以改变块级元素的布局方式，但是不能灵活解决两个块级元素之间缝隙、不能灵活解决多个块级元素分别实现左对齐、右对齐等问题。当然如果想要块级元素随意放置，那就要用到定位了。

（3）浮动的语法

选择器 {float:none/left/right}，对选择器选择的元素实现不浮动、左浮动、右浮动。

（4）浮动的典型应用

通过不浮动的块级元素+嵌套在其内内的浮动元素，实现页面各种布局。

块级元素实现纵向布局，浮动的元素实现横向布局。

（5）因为浮动引出的问题

浮动元素通常嵌套在一个不浮动的元素内，进行配合使用；所有浮动元素的高以及外边距之和不能超过那个不浮动元素，否则出现重叠。

那么当嵌套的浮动的子元素数量不确定时，那么父级元素的高度就不能确定。为了解决这个问题，提出来不设置父级元素的高度，让子元素的高度之和成为父元素高度的方式；然而浮动的子元素具有脱离原先位置、不占空间的特点，那么父元素的高度只会是0，在父元素之后的兄弟元素就会与上一个父元素内浮动元素发生重叠。为了解决这个问题，提出来清除浮动。

（6）清除浮动

1）语法

选择器 {clear:right/left/both};清除选择器选中的元素的右浮动、左浮动、左右浮动。

2）清除浮动方式

a）额外标签法

添加一个与浮动元素同级的空标签（块级），并为其设置清除浮动的样式。

<style>
.one {float:left}
.kongbq {clear:both} 
</style>

<div class="box">
<div class="one"> </div>  
<div class="kongbq"> </div>
</div>

b）父级元素添加overflow样式（常用）

语法：选择器 {overflow:hidden}

c）父级元素添加after伪元素样式（常用）

样式如下：

.clearfixry:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfixry { /*IE6、7专有*/
*zoom:1;
}

d）父级元素添加双伪元素（常用）

样式如下：

.clearfixry:before,.clearfixry:after {
content:"";
display:table;
}
.clearfixry:after {
clear:both;
}
.clearfixry { /*IE6、7专有*/
*zoom:1;
}

2.定位

（1）什么是定位

将html元素放置在任意指定的位置，提高页面布局的灵活性。

（2）定位解决的问题

比如页面侧边固定的工具栏、轮播图

（3）定位的实现方式

利用定位模式+边偏移，在样式中设定定位模式，然后设定元素盒子模型边偏移。

1）边偏移

包括top、right、bottom、left四个分项。

2）定位模式分类

a）静态定位（static）：元素无偏移，也即元素本身的默认布局方式。

语法：选择器 {position:static;}

b）相对定位（relative）：相对元素自身原先位置设置偏移。（常用）

语法：选择器 {position:relative;}

需要注意的是设置了相对定位的元素仍旧实际占据位置

c）绝对定位（absolute）：相对于元素的拥有定位的父级（或者更高级）元素进行定位。（常用）

语法：选择器 {position:absolute;}

需要注意的（1）设置的绝对定位的元素的参考依据是有定位模式的父级或者更高级元素的。

（2）设置了绝对定位的元素会有浮动效果，即不再占有位置。

d）固定定位（fixed）：相对于浏览器可视区域，在某个位置固定不动。（常用）

语法：选择器 {position:fixed;}

需要注意的（1）设置的固定定位的元素的参考依据浏览器当前可视窗口。

（2）设置了固定定位的元素会有浮动效果，即不再占有位置。

e）粘性定位（sticky）：被认为是相对定位和固定定位的混合。元素在跨越特定偏移前为相对定位，之后为固定定位。

语法：选择器 {position:sticky; top:10px;}

需要注意的是（1）粘性定位一定要设置边偏移（任何边都可行），否则其功能和相对定位相同。

（2）设置的粘性定位的元素的参考依据浏览器当前可视窗口。

（3）设置的粘性定位的元素仍旧实际占据位置

#学问分亨官##闪光时刻二期##闪光时刻第二期主题征文#

SS的position属性用于指定元素在文档流中的定位方式，position属性和top、bottom、left、right属性一起决定元素的最终位置。position属性拥有static、relative、absolute、fixed、sticky五个可选项，下面动画展示了一个吸顶导航菜单的样式，当向上滚动页面时导航菜单始终黏在顶部位置，使用sticky属性可以轻松实现这个效果。

在正式引出sticky特性之前，有必要重新回顾下position各个属性的特征，真正理解了它们的含义用起来才会得心应手，出现问题也有清晰的思路去排查并解决它，而且理解sticky也依赖对其他属性的理解。

static是默认行为

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。见下图黄色方框的位置，它所在的位置就是正常文档流应在的位置。

relative是相对原位置的偏移

该关键字下，元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置。继续看黄色方框，假如仅仅设置position为relative的话，黄色方框的位置和static位置是一样的，也就是它按照正常文档流布局，但是此时top、left、right、bottom属性会改变黄色方框的位置，示例中黄色方框相对于原有位置向左、向下偏移了40px。

absolute是相对父级元素的偏移

元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。包裹黄色方框的元素position被设置为relative，那么黄色方框就会依据其父级元素的位置为基准进行定位，示例中它相对于父级元素向左、向下偏移40px。

fixed是相对于视口的偏移

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。下面的示例点击固定定位后，黄色方框移到了浏览器视口向左、向下40px的位置，且无论页面如何滚动，黄色框的位置始终和浏览器视口相对位置不变。

sticky是relative和fixed的结合体

最后，终于说到了ticky属性，它是relative和fixed属性的结合体，示例中黄色方框的样式设置为"position: sticky; top: 20px;"，为了演示sticky的效果，将其上级元素设置了一个固定的高度并显示滚动条，当黄色方框与父元素的顶部高度大于20px时，它表现出relative的行为（也和static相似），正常布局到文档流中；当达到top为20px阈值之后，黄色方框始保持top=20px的位置，表现出黏在顶端的效果，此时表现出fixed的行为。

最后给出上面演示示例的完整源码，实际运行并点击每个选项实际体验一下，相信理解会更加深刻：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css position演示</title>
    <style>
        body {
            font-size: larger;
        }

        .box {
            float: left;
            margin: 1rem;
            width: 100px;
            height: 100px;
            border: 3px solid #00f;
            background: rgba(0, 0, 255, .2);
        }

        #example-element {
            border: 3px solid #f00;
            background: rgba(255, 255, 0, .6);
        }

        #example-option {
            display: flex;
            flex-flow: column;
        }

        table {
            border-collapse: collapse;
            border: 1px solid gray;
        }

        td {
            padding: 16px;
            border-right: 1px solid gray;
        }

        button {
            margin: 0.5rem;
            padding: 1rem 2rem;
        }
    </style>
</head>

<body>
    <h1>Position属性效果演示</h1>
    <table>
        <tr>
            <td id="example-option">
                <button onclick="updateStyle('static')">
                    默认定位 <br>
                    position: static;
                </button>
                <button onclick="updateStyle('relative')">
                    相对定位<br>
                    position: relative;
                    top: 40px; left: 40px;
                </button>
                <button onclick="updateStyle('absolute')">
                    绝对定位<br>
                    position: absolute;
                    top: 40px; left: 40px;
                </button>
                <button onclick="updateStyle('fixed')">
                    固定定位<br>
                    position: fixed;
                    top: 40px; left: 40px;
                </button>
                <button onclick="updateStyle('sticky')">
                    粘性定位<br>
                    position: sticky;
                    top: 20px;
                </button>
            </td>
            <td id="output">
                <div style="height: 452px;overflow: scroll;">
                    <div style="position: relative;">
                        <p>这个示例演示css position属性</p>
                        <br>
                        <br>
                        <br>
                        <div class="box"></div>
                        <div class="box" id="example-element"></div>
                        <div class="box"></div>
                        <p style="clear: left;">为了演示position: sticky效果</p>
                        <p>这里增加了一个可滚动的容器</p>
                        <p>上下滚动这段内容</p>
                        <p>你将发现黄色框会始终停留在视线范围内</p>
                        <p>就像黏在在顶部一样</p>
                        <p>重新向下滚动</p>
                        <p>黄色框还会恢复到原来的位置</p>
                        <p>使用sticky特性</p>
                        <p>可以实现很多特效</p>
                        <p>比如始终黏在顶部的菜单栏</p>
                        <p>发挥想象力还可以实现其他效果...</p>
                    </div>
                </div>
            </td>
        </tr>
    </table>

    <script>
        function updateStyle(position_mode) {
            let box=document.getElementById("example-element")
            if (position_mode=='static') {
                box.style=""
            } else if (position_mode=='relative') {
                box.style="position: relative; top: 40px; left: 40px;"
            } else if (position_mode=='absolute') {
                box.style="position: absolute; top: 40px; left: 40px;"
            } else if (position_mode=='fixed') {
                box.style="position: fixed; top: 40px; left: 40px;"
            } else if (position_mode=='sticky') {
                box.style="position: sticky; top: 20px;"
            }
        }
    </script>
</body>

</html>

参考文献

[1]. https://developer.mozilla.org/zh-CN/docs/Web/CSS/position