模态框

设置对象的层叠顺序需要用到z-index属性，

什么是z-index属性？

这里提供一个代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .a{
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: pink;
    }
    .b{
      position: fixed;
      height: 200px;
        width: 200px;
        background-color: rebeccapurple;
    }
  </style>
</head>
<body>
<div class="a">需要显示的文字</div>
<div class="b"></div>
</body>
</html>

这里我让这两个块级标签都固定。

效果如图

然后我这里有个要求就是将被遮住的内容显示出来，不改变其固定的情况

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .a{
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: pink;
        z-index: 1;
    }
    .b{
      position: fixed;
      height: 200px;
        width: 200px;
        background-color: rebeccapurple;
    }
  </style>
</head>
<body>
<div class="a">需要显示的文字</div>
<div class="b"></div>
</body>
</html>

效果如下

这里就解决了，如何解决呢就是靠这个z-index属性来解决的。

z-index属性

1.z-index值表示谁压着谁，数值大的压盖住数值小的，

2.只有定位了的元素，才能有z-index，也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index属性，而浮动元素不能使用z-index

3.z-index值没有单位，就是一个正整数，默认的z-index值为0，如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

4.从父现象：父类怂了，子类设置的再好也会根据父类的情况进行排列。

透明效果

透明效果需要使用opacity属性，取值范围是0~1,0是完全透明的，1是完全不透明的。

首先是两个背景色重叠在一起

具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #div1{
      /*opacity: 0;*/
      height: 100px;
      width: 100px;
      background-color: pink;
    }
    #div2{
      height: 100px;
      width: 100px;
      background-color: rebeccapurple;
        position: fixed;
      bottom: 10px;
        top: 20px;
    }
  </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

效果如图

然后利用透明的方法解决

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #div1{
      height: 100px;
      width: 100px;
      background-color: pink;
    }
    #div2{
        opacity: 0;
      height: 100px;
      width: 100px;
      background-color: rebeccapurple;
        position: fixed;
      bottom: 10px;
        top: 20px;
    }
  </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

效果如图