博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

position实现分层和遮罩层功能

Posted on 2018-07-26 21:02  alex_hrg  阅读(762)  评论(0编辑  收藏  举报

很多网站,当点了一个按钮后,弹出一个窗口,底层变透明不可选,就是用到层的概念,至少三层

第一层,底层原始层

第二层,遮罩层,用到positon: fixed; top bottom left right 全为0;再加一个透明度opacity: 0.5;

第三层,弹出层,

当然这几层得有个顺序,z-index 数字越大越在顶层。最后就是用js实现display为none;

<body>
<div style="position: fixed;top: 50%;left: 50%;margin-top:  -150px;margin-left: -250px; z-index: 10;width: 500px;height: 300px;background-color: gold;"></div>
<div style="position: fixed;z-index: 9;top: 0;bottom:0;left: 0;right: 0;background: #000;opacity: 0.5;"></div>
<div style="width: 100%;height: 2000px;background-color: #4affe5; border: 1px solid #ff0f1e; margin: 0 auto;"></div>

</body>