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

news2024/9/30 11:22:28

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

第一章层叠、优先级与继承（已完结）
第二章相对单位（已完结）
第三章文档流与盒模型（已完结）
第四章 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