41_定位元素调整层级.html 848 B

12345678910111213141516171819202122232425262728293031323334
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. .box1{
  9. width: 200px;
  10. height: 200px;
  11. background-color: red;
  12. position:absolute;
  13. top: 0;
  14. left: 0;
  15. /* z-index 只有定位元素才有效 */
  16. /* z-index 调整定位层级,默认值为0 ,数字越大层级越高 */
  17. z-index: 1;
  18. }
  19. .box2{
  20. width: 200px;
  21. height: 200px;
  22. background-color: blue;
  23. position:absolute;
  24. top: 10px;
  25. left: 0;
  26. z-index: 2;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div class="box1"></div>
  32. <div class="box2"></div>
  33. </body>
  34. </html>