【CSS in Depth 2 精译_043】6.5 CSS 中的粘性定位技术 + 本章小结

当前内容所在位置（可进入专栏查看其他译好的章节内容）

第一章层叠、优先级与继承（已完结）
第二章相对单位（已完结）
第三章文档流与盒模型（已完结）
第四章 Flexbox 布局（已完结）
第五章网格布局（已完结）
【第六章定位与堆叠上下文】（已完结）
6.1 固定定位
6.1.1 创建一个固定定位的模态对话框
6.1.2 在模态对话框打开时防止屏幕滚动
6.1.3 控制定位元素的大小

6.2 绝对定位
6.2.1 关闭按钮的绝对定位
6.2.2 伪元素的定位问题

6.3 相对定位
6.3.1 创建下拉菜单（上）
6.3.2 创建 CSS 三角形（下）

6.4 堆叠上下文与 z-index
6.4.1 理解渲染过程与堆叠顺序（上）
6.4.2 用 z-index 控制堆叠顺序（上）
6.4.3 深入理解堆叠上下文（下）

6.5 粘性定位 ✔️
6.6 本章小结 ✔️

第七章响应式设计（精译中 ⏳）
7.1 移动端优先

文章目录

- 6.5 粘性定位 Sticky positioning
- 6.6 本章小结 Summary

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
“千里之行，始于足下。”转眼来到了本章的最后一节——粘性定位。在第一版中，这个特性还处于试验阶段，很多地方都存在兼容性问题，介绍它的时候能切身感受到应用到实战时的繁琐。时隔六年，粘性定位这一特性已然成熟，内容也进行了同步更新。与时俱进这四个字，早已内化为这些前端大牛的撸码日常了。这值得我们学习。

6.5 粘性定位 Sticky positioning

最后一种定位类型是 粘性定位（sticky positioning）。粘性定位有点像相对定位和固定定位的结合体：正常情况下，元素会随着页面滚动；当到达屏幕的特定位置后，继续滚动屏幕则会“锁定”在该位置。其最常见的应用场景为侧边栏导航。

回到前面那个含有模态对话框以及下拉菜单的示例页，本节将基于该页面添加一个粘性定位的右侧边栏，实现如图 6.14 所示的双列布局效果：

图 6.14 粘性定位的侧边栏在初始状态下为普通定位

【图 6.14 粘性定位的侧边栏在初始状态下为普通定位】

页面刚加载时，侧边栏位置一切正常。页面一滚动，它也跟着滚动到某个位置；待到侧边栏即将离开视口时，则会锁在该位置不动；而当页面其余部分继续滚动时，侧边栏又像一个设置了固定定位的元素，继续停留在屏幕上，效果如图 6.15 所示：

图 6.15 侧边栏继续“固定”在视口内的效果

【图 6.15 侧边栏继续“固定”在视口内的效果】

为了方便演示，页面结构需略作调整，再重新定义一下两栏。根据代码清单 6.14 更新示例页。该代码将之前的内容（即下拉菜单与标题栏）放在了左侧边栏，同时在右侧边栏放置一个类名为 “affix”（译注：这里的 affix 可以理解为“附件、附加物”）的菜单。

代码清单 6.14 将页面改为带侧边栏的双列布局

<main class="container">
  <div class="col-main"><!-- 将现有内容用 col-main 包起来，作为正文栏 -->
    <nav>
      <div class="dropdown">
        <div class="dropdown-label">Main Menu</div>
        <div class="dropdown-menu">
          <ul class="submenu">
            <li><a href="/">Home</a></li>
            <li><a href="/coffees">Coffees</a></li>
            <li><a href="/brewers">Brewers</a></li>
            <li><a href="/specials">Specials</a></li>
            <li><a href="/about">About us</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <h1>Wombat Coffee Roasters</h1>
  </div>

  <aside class="col-sidebar"><!-- 再加一个侧边栏元素 -->
    <div class="affix"><!-- 新的侧边栏里面放一个 affix 元素 -->
      <ul class="submenu">
        <li><a href="/">Home</a></li>
        <li><a href="/coffees">Coffees</a></li>
        <li><a href="/brewers">Brewers</a></li>
        <li><a href="/specials">Specials</a></li>
        <li><a href="/about">About us</a></li>
      </ul>
    </div>
  </aside>
</main>

接着更新页面样式，将容器设置为弹性容器，并指定两栏的列宽。本例复用了下拉菜单中的子菜单样式，您也可以给侧边栏添加其他想要的元素与样式。根据代码清单 6.15 更新本地样式表。

代码清单 6.15 创建一个两栏布局及粘性定位的侧边栏的 CSS 样式

.container {
  display: flex; /* 将容器设置为两栏布局的弹性容器 */
  width: 80%;
  max-width: 1000px;
  margin: 1em auto;
  min-height: 100vh; /* 特意给容器设置高度 */
}
 
.col-main {
  flex: 1 80%;  /* 给两栏布局 */
}
 
.col-sidebar {
  flex: 20%;  /* 给两栏布局 */
}
 
.affix {
  /* 给侧边栏菜单设置粘性定位，放在距视口顶部 1em 的位置 */
  position: sticky;
  top: 1em;
}

以上样式主要用于设置两栏布局。布局搞定后，affix 元素的粘性定位声明只需要两句就行了。其中 top 值指定了该元素最终固定的位置——距离视口顶部 1em。

粘性定位元素永远不会超出父元素（本例中即为 col-sidebar 元素）的范围，随着页面的滚动，col-sidebar 会一直正常滚动，而 affix 元素则会在滚动到指定位置后停下来。如果继续滚动得足够远，粘性元素还会自行解锁恢复滚动。这种情况只在父元素的底边到达粘性菜单元素的底边时才会发生。注意，要让粘性元素能按预期粘性定位无误，父元素就必须高于粘性元素——这也是我给弹性容器手动设置 min-height 来增加其高度的根本原因。当父元素快要完全滚出视口时，一旦父元素底边碰到了粘性元素，那么该粘性元素将再次恢复滚动。

6.6 本章小结 Summary

固定定位时放置元素的参照物为 视口（viewport）。
相对定位则以 该元素初始状态下的静态位置（initial static position）为参照物 进行定位；页面上的其他元素也将继续基于该初始位置排布。
绝对定位时放置元素的参照物为 距离该元素最近的祖先级定位元素（nearest positioned ancestor element）。
粘性定位能让目标元素在页面其余内容滚动时固定在屏幕某个位置。它们将始终位于其父元素内部。
z-index 仅对 已定位的元素（positioned elements） （译注：即 position: relative | absolute | fixed | sticky）生效，并且使用时会创建一个新的 堆叠上下文（stacking context）。

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

	第 1 版	第 2 版
读者评分	原版：4.7（亚马逊）；中文版：9.3（豆瓣）	原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暂无，待出版
原价	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暂无，待出版
现价	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暂无，待出版
原版国内预订	起步价￥461.00	起步价￥750.00