【CSS in Depth 2 精译_038】6.2 CSS 定位技术之：绝对定位

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

• 第一章 层叠、优先级与继承（已完结）
• 第二章 相对单位（已完结）
• 第三章 文档流与盒模型（已完结）
• 第四章 Flexbox 布局（已完结）
• 第五章 网格布局（已完结）
• 【第六章 定位与堆叠上下文】 ✔️
  • 6.1 固定定位
    • 6.1.1 创建一个固定定位的模态对话框
    • 6.1.2 在模态对话框打开时防止屏幕滚动
    • 6.1.3 控制定位元素的大小
  • 6.2 绝对定位 ✔️
    • 6.2.1 关闭按钮的绝对定位 ✔️
    • 6.2.2 伪元素的定位问题 ✔️
  • 6.3 相对定位（精译中 ⏳）

《CSS in Depth》新版封面

译者注
有了上一节固定定位（fixed positioning）作铺垫，原以为本节的绝对定位最多也就一两句话的事，却不曾想，一个看似普通的关闭按钮的定位问题，还牵扯了这么多知识点在里面。而我忽略的部分，正是需要进一步强化的 CSS 基础，比如作者后面提到的页面可访问性的问题。一起来看看吧。

6.2 绝对定位 Absolute positioning

上一节介绍的固定定位，是相对于视口（viewport）来定位元素的。这个作参照物的视口也被称为该元素的 包含块（containing block）。例如，声明 left: 2em 会让一个定位元素（positioned element）的左边缘放到距离其包含块 2em 的位置。

绝对定位（Absolute positioning）的行为也是如此，只是它的包含块不一样。绝对定位不是相对于视口，而是相对于 最近的祖先定位元素（closest-positioned ancestor element）。与固定元素（fixed element）一样，其 inset 属性（包括 top、right、bottom 及 left）决定了元素边缘在包含块里的具体位置。

6.2.1 关闭按钮的绝对定位 Absolutely positioning the Close button

为了演示绝对定位，本节将重新设置关闭（close）按钮的位置，并将其放置在模态对话框的右上角，如图 6.2 所示。

图 6.2 关闭按钮被定位到模态对话框的右上角

实现上述效果，需要将关闭按钮设置为绝对定位。由于其父元素 modal-body 是固定定位的，因此会成为关闭按钮的包含块。根据以下代码更新关闭按钮的样式。

代码清单 6.5 绝对定位的关闭按钮样式

.modal-close {/* Positions relative to the relatively-positioned parent该相对位置的参照物，为已设置“固定”定位的父元素（原文注释貌似有误？） */position: absolute;top: 0.3em;right: 0.3em;padding: 0.3em;
}

这段代码将按钮放置在了距离 modal-body 顶部 0.3em、右侧 0.3em 的位置。正如本例所示，包含块通常为是目标元素的父元素。如果父元素未被定位（not positioned），浏览器则会沿着 DOM 树往上查找其祖父、曾祖父，直到找到一个定位元素（positioned element）为止，然后将它作为包含块。

注意

如果祖先元素都没有定位，那么这个绝对定位的元素会基于 初始包含块（initial containing block） 来定位。初始包含块的大小与视口相同，并固定在页面顶部。

6.2.2 伪元素的定位问题 Positioning a pseudo-element

关闭按钮的定位就这样搞定了，只是看着有些简陋。对于这种关闭按钮，用户往往更希望看到一个类似 x 的图形化标记，如图 6.3 所示。

图 6.3 将关闭按钮的“close”字样改为“x”

您可能首先想到的是把关闭按钮中的 close 直接改为字母 x，但是这样会导致一些与页面可访问性（accessibility problem）相关的问题：屏幕辅助阅读工具会根据按钮中的文字进行阅读。因此需要给按钮一些有意义的提示信息。在使用 CSS 之前，HTML 本身的语义也必须有意义才行。

解决了语义化相关的问题，CSS 就可以放心大胆地隐藏 close 字样并显示 x 了。实现最终效果总共需要两步。先将按钮里的文字推至按钮外围并隐藏溢出内容；然后将按钮的伪元素 ::after 的 content 属性设置为 x，并通过绝对定位让伪元素在按钮内居中显示。根据代码清单 6.4 更新按钮样式。

说明

相较字母 x，我更推荐选用乘法符号对应的 Unicode 字符。它的对称性更好，也更美观。此外，HTML 的字符实体 ×（即 ×）虽然也可以显示该字符，但在 CSS 伪元素的 content 的属性中，必须使用转义后的 Unicode 编码：\00D7。

代码清单 6.6 替换为 × 符号的关闭按钮样式代码

.modal-close {position: absolute;top: 0.3em;right: 0.3em;padding: 0.3em;border: 0;  font-size: 2em;/* 令关闭按钮呈正方形显示 */height: 1em;          width: 1em;           /* 强制文本溢出元素并隐藏文本 */text-indent: 10em;      overflow: hidden;       background-color: transparent;
}.modal-close::after {position: absolute;line-height: 0.5;top: 0.2em;left: 0.1em;text-indent: 0;content: "\00D7";  /* 添加 Unicode 字符 U+00D7（乘号） */
}

这段代码将按钮设置为 1em 大小的正方形，text-indent 属性则用于将文字推到右边溢出按钮。具体的移动量没有限制，只要能大过按钮的宽度就行。由于 text-indent 是继承属性，需要在 ::after 上重置为 0，以免和文字内容一同缩进。

而此时的伪类元素（译注：即 .modal-close::after）是绝对定位的，并且因为它表现得像按钮的子元素，所以按钮这个定位元素就成了该伪类元素的包含块。为防止伪元素过高，行高 line-height 的值不能太大，再配合 top 和 left 属性，就实现了按钮的居中对齐。这里的精确值是反复试错后的结果，建议您也在自己的浏览器开发者工具里多试试，看看它们是如何影响定位的。

绝对定位可谓是众多定位类型里颇具实力的重量级选手（heavy hitter）。它常常与 JavaScript 配合，出没于弹出菜单（popping up menus）、工具提示（tooltips）以及消息框（“info” boxes）中。接下来将演示绝对定位在构建下拉菜单时的用法，但在此之前，需要先介绍一下它的另一个搭档：相对定位（relative positioning）。

---

---

关于《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

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！