| <html><head> |
| <meta name="viewport" content="width=device-width"> |
| <style> |
| .d1 {position:fixed; top:5; right:5; z-index:2; overflow:hidden;} |
| .o {background:green; height:40px; width:200px;} |
| .t { width:2000px; height:198px; background-color: lightgray; border: 1px solid blue;} |
| body { margin: 0px; } |
| </style> |
| <script> |
| |
| var fixed; |
| |
| function remove_child() |
| { |
| fixed = document.getElementById("d1"); |
| fixed.parentElement.removeChild(fixed); |
| } |
| |
| function add_child() |
| { |
| document.body.appendChild(fixed); |
| } |
| |
| </script> |
| </head> |
| <body> |
| <div class="d1" id="d1"><div class="o">This is a test</div></div> |
| <div class="t"> |
| 000 |
| </div> |
| <div class="t"> |
| 200<br> |
| <button onclick="remove_child();">remove fixed</button> |
| </div> |
| <div class="t"> |
| 400<br> |
| <button onclick="add_child();">add fixed</button> |
| </div> |
| <div class="t"> |
| 600<br> |
| </div> |
| <div class="t"> |
| 800 |
| </div> |
| <div class="t"> |
| 1000 |
| </div> |
| <div class="t"> |
| 1200 |
| </div> |
| <div class="t"> |
| 1400 |
| </div> |
| <div class="t"> |
| 1600 |
| </div> |
| <div class="t"> |
| 1800 |
| </div> |
| <div class="t"> |
| 2000 |
| </div> |
| <div class="t"> |
| 2200 |
| </div> |
| <div class="t"> |
| 2400 |
| </div> |
| <div class="t"> |
| 2600 |
| </div> |
| <div class="t"> |
| 2800 |
| </div> |
| <div class="t"> |
| 3000 |
| </div> |
| <div class="t"> |
| 3200 |
| </div> |
| <div class="t"> |
| 3400 |
| </div> |
| <div class="t"> |
| 3600 |
| </div> |
| <div class="t"> |
| 3800 |
| </div> |
| <div class="t"> |
| 4000 |
| </div> |
| </body></html> |
