nested-fixed-position.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <html><head>
  2. <meta content="text/html; charset=windows-1251" http-equiv="Content-Type">
  3. <style>
  4. .d1{position:fixed;top:50%;right:50%;z-index:2;overflow:hidden;}
  5. .d2{position:fixed;bottom:0;left:0;z-index:2;width:100%;background-color:darkgray;}
  6. .o {background:green;height:40px;width:200px;}
  7. .t { width:2000px; height:198px;background-color: lightgray; border: 1px solid blue;}
  8. body { margin: 0px; }
  9. </style>
  10. <script>
  11. function remove_fixed()
  12. {
  13. document.getElementById("d2").style.position = "static";
  14. }
  15. function add_fixed()
  16. {
  17. document.getElementById("d2").style.position = "fixed";
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <div class="d2" id="d2">This is the parent div.
  23. <div class="d1" id="d1"><div class="o">This is the nested div.</div></div>
  24. </div>
  25. <div class="t">
  26. 000
  27. </div>
  28. <div class="t">
  29. 200
  30. </div>
  31. <div class="t">
  32. 400<br>
  33. <button onclick="remove_fixed();">remove fixed</button>
  34. </div>
  35. <div class="t">
  36. 600<br>
  37. <button onclick="add_fixed();">add fixed</button>
  38. </div>
  39. <div class="t">
  40. 800
  41. </div>
  42. <div class="t">
  43. 1000
  44. </div>
  45. <div class="t">
  46. 1200
  47. </div>
  48. <div class="t">
  49. 1400
  50. </div>
  51. <div class="t">
  52. 1600
  53. </div>
  54. <div class="t">
  55. 1800
  56. </div>
  57. <div class="t">
  58. 2000
  59. </div>
  60. <div class="t">
  61. 2200
  62. </div>
  63. <div class="t">
  64. 2400
  65. </div>
  66. <div class="t">
  67. 2600
  68. </div>
  69. <div class="t">
  70. 2800
  71. </div>
  72. <div class="t">
  73. 3000
  74. </div>
  75. <div class="t">
  76. 3200
  77. </div>
  78. <div class="t">
  79. 3400
  80. </div>
  81. <div class="t">
  82. 3600
  83. </div>
  84. <div class="t">
  85. 3800
  86. </div>
  87. <div class="t">
  88. 4000
  89. </div>
  90. </body></html>