remove-add-fixed-position.html 1.3 KB

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