ManualTests/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:5em;left:50;z-index:2;overflow:hidden;}
   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("d1").style.position = "static";
  15 }
  16
  17 function change_fixed()
  18 {
  19   document.getElementById("d2").style.bottom = "10em";
  20 }
  21
  22 </script>
  23 </head>
  24 <body class="Gradient">
  25 <div class="d1" id="d1"><div class="o">This is a test</div></div>
  26 <div class="d2" id="d2"><div class="o">This is a test</div></div>
  27 <div class="t" onclick="remove_fixed();">
  28 000
  29 </div>
  30 <div class="t">
  31 200<br>
  32 <button onclick="remove_fixed();">remove fixed</button>
  33 </div>
  34 <div class="t">
  35 400<br>
  36 <button onclick="change_fixed();">change fixed</button>
  37 </div>
  38 <div class="t">
  39 600
  40 </div>
  41 <div class="t">
  42 800
  43 </div>
  44 <div class="t">
  45 1000
  46 </div>
  47 <div class="t">
  48 1200
  49 </div>
  50 <div class="t">
  51 1400
  52 </div>
  53 <div class="t">
  54 1600
  55 </div>
  56 <div class="t">
  57 1800
  58 </div>
  59 <div class="t">
  60 2000
  61 </div>
  62 <div class="t">
  63 2200
  64 </div>
  65 <div class="t">
  66 2400
  67 </div>
  68 <div class="t">
  69 2600
  70 </div>
  71 <div class="t">
  72 2800
  73 </div>
  74 <div class="t">
  75 3000
  76 </div>
  77 <div class="t">
  78 3200
  79 </div>
  80 <div class="t">
  81 3400
  82 </div>
  83 <div class="t">
  84 3600
  85 </div>
  86 <div class="t">
  87 3800
  88 </div>
  89 <div class="t">
  90 4000
  91 </div>
  92 </body></html>