ManualTests/nested-fixed-position.html

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