html的z-index

vscode编辑 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         .shadow{             position: fixed;             top: 0;             bottom: 0;             left: 0;             right: 0;             background-color:rgba(0,0,0,0.5);             z-index: 80;         }         .mode{             position: fixed;             height: 400px;             width: 400px;             background-color: white;             z-index: 100; /*数值越大,越在上层显示*/             left: 50%; /*按照窗口宽度的50%来移动*/             top: 50%; /*按照窗口高度的50%来移动*/             margin-top: -200px;              margin-left: -200px;/*正的相当于距离左边200px,负号相当于右边了 */                      }     </style> </head> <body>     <div>         <h1>             我在测试         </h1>     </div>          <div class="mode"></div>     <div class="shadow"></div> </body> </html>
上一篇:使用css来让div进行隐藏或者消失


下一篇:CSS:元素的显示与隐藏(display、visibility、overflow)