ManualTests/remove-add-fixed-position.html

   1 <html><head>
   2 <meta name="viewport" content="width=device-width">
   3 <style>
   4 .d1 {position:fixed; top:5; right:5; z-index:2; overflow:hidden;}
   5 .o {background:green; height:40px; width:200px;}
   6 .t { width:2000px; height:198px; background-color: lightgray; border: 1px solid blue;}
   7 body { margin: 0px; }
   8 </style>
   9 <script>
  10
  11 var fixed;
  12
  13 function remove_child()
  14 {
  15   fixed = document.getElementById("d1");
  16   fixed.parentElement.removeChild(fixed);
  17 }
  18
  19 function add_child()
  20 {
  21   document.body.appendChild(fixed);
  22 }
  23
  24 </script>
  25 </head>
  26 <body>
  27 <div class="d1" id="d1"><div class="o">This is a test</div></div>
  28 <div class="t">
  29 000
  30 </div>
  31 <div class="t">
  32 200<br>
  33 <button onclick="remove_child();">remove fixed</button>
  34 </div>
  35 <div class="t">
  36 400<br>
  37 <button onclick="add_child();">add fixed</button>
  38 </div>
  39 <div class="t">
  40 600<br>
  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>