| <html><head> |
| |
| <meta content="text/html; charset=windows-1251" http-equiv="Content-Type"> |
| <style> |
| .d1{position:fixed;top:50%;right:50%;z-index:2;overflow:hidden;} |
| .d2{position:fixed;bottom:0;left:0;z-index:2;width:100%;background-color:darkgray;} |
| .o {background:green;height:40px;width:200px;} |
| .t { width:2000px; height:198px;background-color: lightgray; border: 1px solid blue;} |
| body { margin: 0px; } |
| </style> |
| <script> |
| function remove_fixed() |
| { |
| document.getElementById("d2").style.position = "static"; |
| } |
| |
| function add_fixed() |
| { |
| document.getElementById("d2").style.position = "fixed"; |
| } |
| |
| </script> |
| </head> |
| <body> |
| <div class="d2" id="d2">This is the parent div. |
| <div class="d1" id="d1"><div class="o">This is the nested div.</div></div> |
| </div> |
| <div class="t"> |
| 000 |
| </div> |
| <div class="t"> |
| 200 |
| </div> |
| <div class="t"> |
| 400<br> |
| <button onclick="remove_fixed();">remove fixed</button> |
| </div> |
| <div class="t"> |
| 600<br> |
| <button onclick="add_fixed();">add fixed</button> |
| </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> |
