7ec1ba3eb4442606663eea53347fd9a2c2e5861b.svn-base 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>z-index18</title>
  6. <style>
  7. body {
  8. background: violet;
  9. }
  10. #container {
  11. position: relative;
  12. height: 300px;
  13. }
  14. .base {
  15. background: green;
  16. }
  17. #container div {
  18. width: 800px;
  19. height: 300px;
  20. }
  21. .div1 {
  22. background: red;
  23. }
  24. #container .div2 {
  25. width: 400px;
  26. background: blue;
  27. }
  28. #container .div3 {
  29. background: orange;
  30. width: 200px;
  31. height: 200px;
  32. }
  33. #container .highlight1 {
  34. background: purple;
  35. height: 100px;
  36. }
  37. #container .highlight2 {
  38. background: pink;
  39. height: 100px;
  40. }
  41. #container .highlight3 {
  42. background: navy;
  43. height: 100px;
  44. }
  45. #container .last {
  46. background: brown;
  47. width: 100px;
  48. height: 100px;
  49. }
  50. </style>
  51. <script type="text/javascript" src="../../test.js"></script>
  52. </head>
  53. <body>
  54. <div id="container" class="jqplot-target" style="position: relative; height: 300px;">
  55. <div class="base" style="position: absolute; left: 0px; top: 0px;">a</div>
  56. <div class="base" style="position: absolute; left: 0px; top: 0px;">b</div>
  57. <div style="position: absolute; left: 16px; top: 10px;">c</div>
  58. <div style="position: absolute; left: 16px; top: 10px;">d</div>
  59. <div style="position: absolute; left: 16px; top: 10px;">e</div>
  60. <div class="div1" style="position: absolute; left: 16px; top: 10px;">f</div>
  61. <div class="div2" style="position: absolute; left: 16px; top: 10px;">g</div>
  62. <div class="div3" style="position: absolute; left: 16px; top: 10px;">h</div>
  63. <div class="highlight1" style="position: absolute; right: 16px; top: 10px;">i</div>
  64. <div class="highlight2" style="position: absolute; left: 16px; top: 60px;">j</div>
  65. <div class="highlight3" style="position: absolute; left: 56px; top: 90px;">k</div>
  66. <div class="last" style="position: absolute; left: 16px; top: 10px;">l</div>
  67. </div>
  68. </body>
  69. </html>