做网站 什么语言,手机网站免费制作平台有哪些,学做面包到什么网站,中国新闻最新消息今天当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第一章 层叠、优先级与继承#xff08;已完结#xff09;第二章 相对单位#xff08;已完结#xff09;第三章 文档流与盒模型#xff08;已完结#xff09;第四章 Flexbox 布局#xff08;已… 当前内容所在位置可进入专栏查看其他译好的章节内容 第一章 层叠、优先级与继承已完结第二章 相对单位已完结第三章 文档流与盒模型已完结第四章 Flexbox 布局已完结第五章 网格布局已完结【第六章 定位与堆叠上下文】 ✔️ 6.1 固定定位 6.1.1 创建一个固定定位的模态对话框6.1.2 在模态对话框打开时防止屏幕滚动6.1.3 控制定位元素的大小 6.2 绝对定位 ✔️ 6.2.1 关闭按钮的绝对定位 ✔️6.2.2 伪元素的定位问题 ✔️ 6.3 相对定位精译中 ⏳ 文章目录 6.2 绝对定位 Absolute positioning6.2.1 关闭按钮的绝对定位 Absolutely positioning the Close button6.2.2 伪元素的定位问题 Positioning a pseudo-element 《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 的字符实体 times;即 ×虽然也可以显示该字符但在 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 字符 U00D7乘号 */
}这段代码将按钮设置为 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 版高分译文专栏全网首发精译精校持续更新计划今年内完成全书翻译敬请期待
