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。此时在设置子元素的值为负数

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

你可能感兴趣的:(css父元素背景覆盖其子元素背景)