如何解决css定位position引发的层级关系问题-创新互联

 
        c1

此时c2的层级更高，应该在叠在c1上方

分析一下第二点

           .c1{
                width: 100px;
                height: 100px;
                background-color: rgb(255, 0, 0);
                position: relative;

           }
           .c2{
                width: 200px;
                height: 100px;
                backgr

此时定位元素都有层级,后面的元素在上面

分析一下第三点

         .c1{
                width: 100px;
                height: 100px;
                background-color: rgb(255, 0, 0);
                position: relative;

此时c3会直接覆盖c2,因为c2的定位是absolute，下面的元素会往c2处移动,由第二点可知，c3在c2的上面，故c3直接盖住了c2

分析一下第四点

           .c1{
                width: 100px;
                height: 100px;
                background-color: rgb(255, 0, 0);
                position: relative;

c1和c2都是定位元素，默认z-index:0,将c1的z-index设置为1，这样c1会在c2的上面

分析一下第五点

           .c1{
                width: 100px;
                height: 100px;
                background-color: rgb(255, 0, 0);
                position: relative;

           }
           .c2{
                width: 200px;
                height: 100px;
                background-color: rgb(0, 0, 255);;
                position: absolute;
                z-index: 1;
           }


        
                c2
            c1