css父元素背景覆盖其子元素背景

时间 2020-08-18 标签 css 元素背景覆盖

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             
 8             .test1{
 9                 width: 100px;
10                 height: 100px;
11                 border: 1px solid green;
12                 background: green;
13                 position: absolute;
14                 z-index: auto;
15             }
16             
17             .test2{
18                 width: 100px;
19                 height: 100px;
20                 border: 1px solid black;
21                 background: black;
22                 position: relative;
23                 left: 20px;
24                 top: -20px;
25                 z-index: -1;
26             }
27         </style>
28     </head>
29     <body>
30         <div class="test1">
31             <div class="test2"></div>
32             
33         </div>
34         
35     </body>
36 </html>

父元素不设置z-index 的值时，默认是auto。此时在设置子元素的值为负数html

转载于:https://www.cnblogs.com/zouqin/p/5498495.htmlpost