一、层布局：定位元素重叠
在CSS中可以通过z-index属性来确定定位元素的层叠等级。需要注意的是：
- z-index属性只有在元素的position属性取值为relative、absolute或fixed时才可以使用。
- 在z-index属性中，其值越大层叠级别就越高，如果两个绝对定位的元素的该属性具有相同的number值，那么将依据它们在HTML文档中声明的顺序层叠。
- z-index属性只能在同一级别的HTML上体现作用
- 对于未指定此属性的绝对定位元素，可以看做值为auto,即自动设置，一般会根据父元素的定位进行确定；
- 对于未指定此属性的绝对定位元素，此属性的number值为正数的元素会在其之上，为负数则在其之下。
eg：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>定位元素层叠</title> 6 <style type="text/css"> 7 body{ 8 margin: 0; 9 padding: 0;; 10 } 11 #contain1{ 12 position: absolute; 13 z-index: 10; 14 width: 200px; 15 height: 200px; 16 background-color: #5d63fa; 17 } 18 #contain2{ 19 position: absolute; 20 z-index: 1; 21 width: 200px; 22 height: 200px; 23 background-color: brown; 24 left: 30px; 25 top:30px; 26 } 27 </style> 28 </head> 29 <body> 30 <div id="contain1"></div> 31 <div id="contain2"></div> 32 </body> 33 </html>