day15-CSS内容position之3层页面-优快云博客

本文介绍如何使用CSS实现页面遮罩效果，包括固定遮罩层、设置透明度及层级，最终达到点击按钮后仅能操作指定区域的效果。

一、概述

　　我们之前经常遇到，点击一个按钮就会弹出一个框，然后除了框内的东西，其他的都不可以操作了，这个是怎么做的呐？今天我们就来亲手做一个，如何实现这种搞到上的效果。

二、需要实现的效果图

图效果的链接：猛击这里

二、实现两层页面

说明：先实现下面两层的，最外层白色的，我们下面继续研究。那说起第二层，就是把第一层全部包裹起来，然后无法点击第一层页面。意思就是说在第一层页面的基础上，我把position： fixed，然后我让他的上下左右的都为0像素。

<body>
    <div style="position: fixed;top:0;right: 0;left: 0;bottom: 0;background-color: black;"></div>  #用fixed固定，然后上下左右为0像素
    <div style="height: 5000px;background-color: skyblue;"></div>
</body>

效果图：

好像不是我们要的效果：我们要的效果是第二层是半透明状态啊，这边用到一个css的一个属性：opacity: 0.5。opacity的值是0-1,1:表示完全遮住了，0表示没有遮住。中间值0.5相当于半透明状态，所以我们代码改成这样：

<body>
    <div style="opacity: 0.5;   #透明度设置0.5表示半透明状态
    position: fixed;top:0;right: 0;left: 0;bottom: 0;background-color: black;"></div>
    <div style="height: 5000px;background-color: skyblue;"></div>
</body>

效果图：

注意了，这边需要使用opacity属性。

三、3层页面实现

　　既然2层我们都已经搞定了，现在我们来看看，3层是如何搞定的，无非就是在2层外面在固定一层，但是第三层不是全部覆盖而已，只是占了某一块。

<body>
    <div style="position: fixed;background-color: white;height: 400px;width: 500px;"></div> #在外面再加上一层
    <div style="opacity: 0.5;
    position: fixed;top:0;right: 0;left: 0;bottom: 0;background-color: black;"></div>
    <div style="height: 5000px;background-color: skyblue;"></div>
</body>

效果图：

但是感觉，这个没啥效果，这个是随机性的，哪个在上面在下面不一定，所以这边又要引用一个：z-index，这个值越大，优先级越高，页面就越往上。

<body>
    <div style="z-index:10;   #z-index值为10
    position: fixed;background-color: white;height: 400px;width: 500px;"></div>
    <div style="z-index:9;  #z-index值为9
    opacity: 0.5;
    position: fixed;top:0;right: 0;left: 0;bottom: 0;background-color: black;"></div>
    <div style="height: 5000px;background-color: skyblue;"></div>
</body>

效果图：

哇塞，好像已经达到我们想要的效果了，但是好像白色的页面不在中间啊，所以我们现在居中一下：

<body>
    <div style="z-index:10;
    top:50%;left: 50%;margin-left: -250px;margin-top: -200px;  #位置居中一下
    position: fixed;background-color: white;height: 400px;width: 500px;"></div>
    <div style="z-index:9;
    opacity: 0.5;
    position: fixed;top:0;right: 0;left: 0;bottom: 0;background-color: black;"></div>
    <div style="height: 5000px;background-color: skyblue;"></div>
</body>

效果图：