这不仅仅是在APP等移动端常常见到的应用，在网页中也常常遇到。作者在书中给出了4种解决方法，我测试了这几种方法，当然不是每一种方法都和合适，所以推荐大家三种常用的方法
我们可以看看其最终的效果
lightbox
小测试
方法1 -- HTML添加一个深色覆盖图层
html
<div class="overlay">
<div class="lightbox"> </div>
</div>
第一步：
将overlay设置成fixed，并占满屏幕，调整期背景色为半透明深色
css
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,.8);
第二步：
我们将lightbox设置成fixed布局，并设置其图层为
z-index : 1
其次就是居中显示了（常常用于dialog对话框）
css
.lightbox{
position: fixed;
width: 200px;
height: 200px;
background: white;
left: calc(50% - 100px);
top: calc(50% - 100px);
z-index: 1;
}
到此就达到了上述效果
但这种方法有缺点
- 增加了html结构
- 当我们显示对话框时，便不能再与页面其他组件进行交互（有时候却是一个优点）
方法2 -- 添加一个伪元素来解决
首先我们不再需要上述复杂的html标签，我们只需简单的在body或者这个容器上套用类名（dimmed）
---这真的是一个比较大的不足之处，假如我们要在容器上加入其它伪元素，这个方法就力不从心了
css
body.dimmed::before{
content: '';
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 1;
background: rgba(0,0,0,.8);
}
lightbox和方法一中一样，我们让其居中显示
方法3 -- boxshadow解决方法
利用扩大box-shadow的扩散半径，并把平移值和模糊设置为0，建立一个非常大的阴影
box-shadow: 0 0 0 999px rgba(0,0,0,.8);
但是存在一个问题，它并不支持 非常大的解析度（>2000px）,所以采用了可视范围单位vmax
1vmax 等于 1vw或1vh,取决于哪个更大选择哪个
所以设置成：
box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);
这里有个需要注意的地方，这个方法最好使用在元素有固定定位和网页不能滚动时使用
当然还有一个很重要的特性，box-shadow不会捕捉任何鼠标互动，所以页面中的其他元素我们仍然可以点击使用
总结：
当我们可以使用第二种方法时尽量使用第二种方法，
其次第一种方法可以作为备用
第三种方法当要求与页面其他元素互动时使用比较合适
