02-CSS基础与进阶-day9_2018-09-12-21-37-34-CSDN博客

z-index
当对多个元素设置定位时,重叠的定位元素可以通过z-index调整堆叠顺序其值可以为0 正数负数
特点 1 z-index默认值为0 取值越大定位元素在层叠元素上越局上
2 z-index取值一样，后来居上
3 z-index值不能加单位
4 只有定位元素才有该属性，其余如浮动等都无此属性
元素的显示和隐藏
display: none; /* 隐藏元素不是删除只不过看不见不保留位置*/
visibility: hidden;/*隐藏元素它保留位置*/

06显示和隐藏二维码.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       div.content {
              width: 100px;
              height: 100px;
              text-align: center;
              line-height: 100px;
              background-color: rgba(0,0,0,0.4);
       }

       .wrap {
              position: relative;
       }

       .wrap .erweima {
              position: absolute;
              left: 100px;
              top: 0;
              display: none;
       }

       .wrap:hover .erweima {
             display: block;
       }

    </style>
</head>
<body>
    <div class="wrap">    
        <div class="content">扫二维码</div>
        <div class="erweima">
            <img src="img/jd.png" alt="">
        </div>
    </div>
</body>
</html>