CSS3 Z—Index 详解

标签：CSS3 Index index height width 详解 position absolute div0

CSS3 Z—Index 详解

z-index属性规定元素的堆叠顺序，值越高就会显示在上面。

无定位

<style>
         .div0{
            height: 80px;
             width:100px;
         }
         div{
             height: 50px;
             width:60px;

         }
     </style>
  </head>
  <body>
      <div class="div0" style="background-color:green">
    <div class="div1" style="background-color:red">123</div>
    </div>
    <div class="div2" style="background-color:blue">456</div>
    <div class="div3" style="background-color:rgba(0, 0, 0, 0.801)">789</div>
  </body>

CSS3 Z—Index 详解_jquery

子级会显示在父级上方。

有定位

<style>
         .div0{
            height: 80px;
             width:100px;
         }
         div{
             height: 50px;
             width:60px;
         }
         .div2{
             position:absolute;
         }
         .div3{
             position:absolute;
         }
     </style>
  </head>
  <body>
      <div class="div0" style="background-color:green">
    <div class="div1" style="background-color:red">123</div>
    </div>
    <div class="div2" style="background-color:blue">456</div>
    <div class="div3" style="background-color:rgba(0, 0, 0, 0.801)">789</div>
  </body>

CSS3 Z—Index 详解_jquery_02

同级后者居上，

设置z-index

<style>
         .div0{
            height: 80px;
             width:100px;
         }
         div{
             height: 50px;
             width:60px;
         }
         .div2{
             z-index:  100;
             position:absolute;
         }
         .div3{
             position:absolute;
             z-index:  10;
         }
     </style>
  </head>
  <body>
      <div class="div0" style="background-color:green">
    <div class="div1" style="background-color:red">123</div>
    </div>
    <div class="div2" style="background-color:blue">456</div>
    <div class="div3" style="background-color:rgba(0, 0, 0, 0.801)">789</div>
  </body>

CSS3 Z—Index 详解_javascript_03

div2比div3的z-index高，所以蓝色div2显示在上面。

混合显示

<style>
         .div0{
            height: 80px;
             width:100px;
         }
         div{
             height: 50px;
             width:60px;
         }
         .div2{
             z-index:  100;
             position:absolute;
         }
         .div3{
             position:absolute;
             z-index:  10;
         }
     </style>
  </head>
  <body>
     
    <div class="div2" style="background-color:blue">456</div>
    <div class="div3" style="background-color:rgba(0, 0, 0, 0.801)">789</div>
    <div class="div0" style="background-color:green">
        <div class="div1" style="background-color:red">123</div>
        </div>
  </body>

CSS3 Z—Index 详解_html5_04

由于div2 3 脱离标准流所以在上面因为div2的z-index值高所以显示在最上面，依次分别是 div2 div3 div1 div0

再看下面这个

<style>
         .div0{
            height: 80px;
             width:100px;
         }
         div{
             height: 50px;
             width:60px;
         }
         .div2{
             z-index:  -1;
             position:absolute;
         }
         .div3{
             position:absolute;
             z-index:  -1;
         }
     </style>
  </head>
  <body>
     
    <div class="div2" style="background-color:blue">456</div>
    <div class="div3" style="background-color:rgba(0, 0, 0, 0.801)">789</div>
    <div class="div0" style="background-color:green">
        <div class="div1" style="background-color:red">123</div>
        </div>
  </body>

CSS3 Z—Index 详解_javascript_05

可以看到红色显示出来了，这是为什么，静态定位不能修改div0 z-index的值，但不意味着div0没有值，它的值是0，当你修改其他元素的z-index值是负数小于 0是 div0自然就显示在了最外层，

现在的顺序是 div1 div0 div3 div2

能不能让里面的元素不显示在外层？

.div0{
            position:absolute;
            height: 200px;
             width:170px;
             z-index:100;
         }
         .div1{
            position:absolute;
            height: 80px;
             width:100px;
             z-index:-1;
         }
         /* div{
             height: 50px;
             width:60px;
         } */
         /* .div2{
             z-index:  -1;
             position:absolute;
         }
         .div3{
             position:absolute;
             z-index:  -1;
         } */
     </style>
  </head>
  <body>
     
    <!-- <div class="div2" style="background-color:blue">456</div>
    <div class="div3" style="background-color:rgba(0, 0, 0, 0.801)">789</div> -->
    <div class="div0" style="background-color:green">
        <div class="div1" style="background-color:red">123</div>
        </div>
  </body>

CSS3 Z—Index 详解_jquery_06

div0和div1都有定位 div0z-index值大于div1，但是红色仍然是外层。

如果div0没有修改定位呢？

<style>
         .div0{
            height: 200px;
             width:170px;
             
         }
         .div1{
            position:absolute;
            height: 80px;
             width:100px;
             z-index:-1;
         }
         /* div{
             height: 50px;
             width:60px;
         } */
         /* .div2{
             z-index:  -1;
             position:absolute;
         }
         .div3{
             position:absolute;
             z-index:  -1;
         } */
     </style>
  </head>
  <body>
     
    <!-- <div class="div2" style="background-color:blue">456</div>
    <div class="div3" style="background-color:rgba(0, 0, 0, 0.801)">789</div> -->
    <div class="div0" style="background-color:green">
        <div class="div1" style="background-color:red">123</div>
        </div>
  </body>

CSS3 Z—Index 详解_javascript_07

div0显示在了外面，要注意设置定位的场景，父子级设置设置脱离标准流的定位，z-index值的设置无法影响父子级的显示，如果只有子级脱离了标准流，父级没有脱标，那么就能修改父子级的显示，

包含个人理解错误请指出

标签：CSS3,Index,index,height,width,详解,position,absolute,div0
From： https://blog.51cto.com/u_15830125/5763583