html+css快速实现遮罩层

_处女座程序员的日常

于 2022-04-12 08:34:14 发布

阅读量339

点赞数 2

分类专栏： css 前端 html 文章标签：前端 html 个人开发

本文链接：https://blog.csdn.net/qq_42931285/article/details/124114815

版权

前端同时被 3 个专栏收录

372 篇文章 12 订阅

订阅专栏

css

112 篇文章 0 订阅

订阅专栏

html

46 篇文章 1 订阅

订阅专栏

使用子绝父固定定位实现

// html
   <div class="modal">
        <div class="container">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. At qui illum, est vitae rerum a dignissimos voluptatum consequuntur culpa natus, nesciunt impedit, ipsum magnam! Doloribus repudiandae ipsum animi corrupti reiciendis!
        </div>
    </div>
 //css   
    .modal {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .5);
}

.modal .container{
    width:404px;
    height: 512px;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
    padding: 1em;
    border-radius: 6px;
}