遮罩层2

<style>
            * {
                margin: 0px;
                padding: 0px;
            }
            
            .login {
                width: 100px;
                height: 30px;
                font-size: 25px;
                line-height: 30px;
                border: 1px solid black;
                text-align: center;
                background-color: darkcyan;
                color: white;
            }
            
            .login:hover {
                cursor: pointer;
                background-color: greenyellow;
            }
            
            .mask {
                width: 100%;
                background-color: black;
                opacity: 0.5;
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: 90;
            }
            
            .log-div {
                width: 500px;
                height: 300px;
                background-color: white;
                position: fixed;
                /*top: 30%;*/
                /*left: 30%;*/
                z-index: 99;
            }
        </style>

 

<div class="mask" hidden></div>
        <div class="log-div" hidden="hidden"></div>
        <div class="login">登 录</div>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
    </body>