zoukankan      html  css  js  c++  java
  • 堆叠上下文z-index

    给元素设置position为absolute或者z-index不为auto,或者opacity小于1,会创建一个堆叠上下文,它的后代元素,都会根据它父堆叠上下文,进行排序,不会针对其他的堆叠上下文排序。

    页面结构

             <div class="a"></div>
            <div class="b">
                <div class="c"></div>
            </div>
            <div class="d"></div>        

    没有设置堆叠上下文前:

                div{
                     50px;
                    height: 50px;
                    position: absolute;
                }
                .a{
                    background-color: red;
                }
                .b{
                    background-color: #008000;
                    left: 20px;
                    top: 20px;
                }
                .c{
                    background-color: black;
                    left: 10px;
                    top: 10px;
                    z-index: 2;
                }
                .d{
                    background-color: blue;
                    left: 60px;
                    top: 60px;
                    z-index: 1;
                }

    b元素创建了堆叠上下文后:

           div{
                     50px;
                    height: 50px;
                    position: absolute;
                }
                .a{
                    background-color: red;
                }
                .b{
                    background-color: #008000;
                    left: 20px;
                    top: 20px;
                    z-index: 1;
                    /*opacity: 0.99; z-index和opacity有一个就可以满足*/
                }
                .c{
                    background-color: black;
                    left: 10px;
                    top: 10px;
                    z-index: 2;
                }
                .d{
                    background-color: blue;
                    left: 60px;
                    top: 60px;
                    z-index: 1;
                }
  • 相关阅读:
    nginx超时问题
    linux打包文件,压缩文件
    centos查看文件夹大小
    Nginx反向代理和负载均衡
    nginx的location配置详解
    nginx错误Upstream timed out
    mysql处理函数
    SQL左右连接中的on and和on where的区别
    html select change事件触发
    get,post区别
  • 原文地址:https://www.cnblogs.com/MySweetheart/p/13343086.html
Copyright © 2011-2022 走看看