z-index-1-ref.html 880 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <style>
  5. .container {
  6. position:absolute;
  7. width:400px;
  8. height:100px;
  9. background-color:yellow;
  10. z-index:0;
  11. }
  12. .container > div {
  13. height:100px;
  14. margin-bottom:-100px;
  15. }
  16. .negative {
  17. width:380px;
  18. background-color:blue;
  19. }
  20. .block {
  21. width:360px;
  22. background-color:purple;
  23. }
  24. .float {
  25. width:340px;
  26. background-color:green;
  27. }
  28. .inline {
  29. width:320px;
  30. background-color:pink;
  31. }
  32. #outline {
  33. height:60px;
  34. width:260px;
  35. border:20px solid gray;
  36. }
  37. .positioned {
  38. width:280px;
  39. background-color:magenta;
  40. }
  41. .positive {
  42. width:260px;
  43. background-color:orange;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <div class="container">
  49. <div class="negative"></div>
  50. <div class="block"></div>
  51. <div class="float"></div>
  52. <div class="inline"></div>
  53. <div id="outline"></div>
  54. <div class="positioned"></div>
  55. <div class="positive"></div>
  56. </div>
  57. </body>
  58. </html>