zoukankan      html  css  js  c++  java
  • position实现分层和遮罩层功能

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

    第一层,底层原始层

    第二层,遮罩层,用到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; 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=" 100%;height: 2000px;background-color: #4affe5; border: 1px solid #ff0f1e; margin: 0 auto;"></div>
    
    </body>
    

      

  • 相关阅读:
    程序员掌握的单词汇总
    Django--基础补充
    C#入门概述
    python常用模块
    软件开发经验之谈
    p7.BTC-挖矿总结
    p6.BTC-挖矿难度
    p5.BTC-网络
    p4.BTC-实现
    p3.BTC-协议
  • 原文地址:https://www.cnblogs.com/alex-hrg/p/9374440.html
Copyright © 2011-2022 走看看