Page 185 - css揭秘
P. 185
position: absolute;
z-index: 1;
/* [其余样式] */
}
.overlay 遮罩层负责把这个关键元素背后的所有东西调暗。.lightbox
需要指定一个更高的 z-index，以便绘制在遮罩层的上层。这个方法稳定可
靠，但需要增加一个额外的 HTML 元素，这意味着该效果无法由 CSS 单独
实现。这不是一个很严重的问题，但对我们来说又确实是个麻烦事。不过还
好，有其他方法可以摆脱这个麻烦。
图 6-13
Twitter 用这个效果来实现弹出式
对话框
伪元素方案
我们可以用伪元素来消除额外的 HTML 元素，比如：
body.dimmed::before {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba(0,0,0,.8);
}
这个办法确实有一定改善，因为我们可以直接在 CSS 层面使用这个效
果了。不过问题是，这个方法的可移植性还不够好，因为 <body> 元素上可
能有其他需求已经占用了 ::before 伪元素；而且在使用这个效果时，我们
往往还需要一点 JavaScript 来给 <body> 添加 dimmed 这个类。
154 第 6 章 用户体验
ࠡ JOEC
