元素的层级

分手后的思念是犯贱 2021-11-17 17:46 302阅读 0赞

1.下面的盖住上面的元素

2.z-index大的盖住z-index小的

3.父元素的z-index再大也盖不住子元素

1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <script type="text/javascript">
     7         </script>
     8     <style type="text/css">
     9         
    10         .box2{
         
    11                 width: 200px;
    12                 height: 200px;
    13                 background-color: darkblue;
    14                 /* 开启绝对定位 */
    15                 position: absolute;
    16                 top: 100px;
    17                 left: 100px;
    18                 /* 如果定位元素的层级是一样，则下边的元素会盖住上边的
    19                  通过z-index属性可以用来设置元素的层级
    20                  可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
    21                   层级越高，越优先显示
    22                  对于没有开启定位的元素不能使用z-index
    23                  */
    24                 z-index: 1;opacity:0.5;
    25                 }
    26         .box3{
         
    27                     width: 200px;
    28                     height: 200px;
    29                     background-color: yellow;
    30                     
    31                     }
    32         .box1{
         
    33             width: 200px;
    34             height: 200px;
    35             background-color: bisque;
    36             z-index: 2;
    37         }
    38         .box4{
         
    39             width: 200px;
    40             height: 200px;
    41             background-color: aquamarine;
    42             position: relative;
    43             z-index: 20;
    44             /*
    45             父元素的层级再高也不会盖住子元素
    46             */
    47         }
    48         .box5{
         
    49             width: 100px;
    50             height: 100px;
    51             background-color: beige;
    52             position: absolute;
    53             z-index: 10;
    54         }
    55     </style>
    56     </head>
    57     <body style="height: 5000px;">
    58     <div class="box1"></div>
    59     <div class="box2"></div>
    60     <div class="box3"></div>
    61     
    64     <div class="box4">
    65         <div class="box5"></div>
    66     </div>
    67     </body>
    68 </html>

设置元素的透明背景  
opacity可以用来设置元素背景的透明

它需要一个0-1之间的值 0表示完全透明，1表示完全不透明  0.5半透明

opacity属性再IE8及以下不支持，可以用以下属性代替

filter:alpha(opacity=透明度;)

透明度 需要一个0~100之间的值

转载于:https://www.cnblogs.com/zuiaimiusi/p/11214962.html