123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- <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>
|