浮动&清除浮动，相对定位， 绝对定位, z-index
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>定位2</title> 6 <style> 7 .div1 { 8 padding:50px; 9 background: red; 10 width: 600px; 11 height: 600px; 12 position: relative; 13 left:10px; 14 top:10px; 15 } 16 .div2 { 17 padding:60px; 18 background: green; 19 position: absolute; 20 left:0px; 21 top:0px; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="div1"> 27 <div class="div2"></div> 28 </div> 29 </body> 30 </html>
层级
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>层级</title> 6 <style> 7 div { 8 width: 400px; 9 height: 400px; 10 } 11 #div1 { 12 background: red; 13 position: absolute; 14 left: 50px; 15 top: 50px; 16 z-index: 1; 17 } 18 #div2 { 19 background: green; 20 position: absolute; 21 left: 150px; 22 top: 150px; 23 z-index: 2; 24 } 25 #div3 { 26 background: blue; 27 position: absolute; 28 left: 250px; 29 top: 250px; 30 } 31 </style> 32 </head> 33 <body> 34 <div id="div1"></div> 35 <div id="div2"></div> 36 <div id="div3"></div> 37 </body> 38 </html>