tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

position-try-order-logical-ref.html (2542B)

      1 <!DOCTYPE html>
      2 <style>
      3 .container {
      4  position: relative;
      5  display: inline-block;
      6  vertical-align: middle;
      7  width: 100px;
      8  height: 100px;
      9  margin: 10px;
     10  border: solid 3px;
     11 }
     12 
     13 .anchor {
     14  position: absolute;
     15  anchor-name: --a;
     16  width: 25px;
     17  height: 25px;
     18  left: 50px;
     19  top: 25px;
     20  background: dodgerblue;
     21 }
     22 
     23 .anchored {
     24  position: absolute;
     25  position-anchor: --a;
     26  position-try-fallbacks: flip-block flip-inline;
     27  width: 15px;
     28  height: 15px;
     29  background: green;
     30 }
     31 </style>
     32 <div class="container">
     33  <div class="anchor"></div>
     34  <div class="anchored" style="position-area: top left;"></div>
     35 </div>
     36 
     37 <div class="container">
     38  <div class="anchor"></div>
     39  <div class="anchored" style="position-area: top left;"></div>
     40 </div>
     41 
     42 <div class="container">
     43  <div class="anchor"></div>
     44  <div class="anchored" style="position-area: bottom right;"></div>
     45 </div>
     46 
     47 <div class="container">
     48  <div class="anchor"></div>
     49  <div class="anchored" style="position-area: bottom right;"></div>
     50 </div>
     51 
     52 <br>
     53 
     54 <div class="container">
     55  <div class="anchor"></div>
     56  <div class="anchored" style="position-area: top left;"></div>
     57 </div>
     58 
     59 <div class="container">
     60  <div class="anchor"></div>
     61  <div class="anchored" style="position-area: top left;"></div>
     62 </div>
     63 
     64 <div class="container">
     65  <div class="anchor"></div>
     66  <div class="anchored" style="position-area: bottom right;"></div>
     67 </div>
     68 
     69 <div class="container">
     70  <div class="anchor"></div>
     71  <div class="anchored" style="position-area: bottom right;"></div>
     72 </div>
     73 
     74 <br>
     75 
     76 <div class="container">
     77  <div class="anchor"></div>
     78  <div class="anchored" style="position-area: bottom right;"></div>
     79 </div>
     80 
     81 <div class="container">
     82  <div class="anchor"></div>
     83  <div class="anchored" style="position-area: bottom right;"></div>
     84 </div>
     85 
     86 <div class="container">
     87  <div class="anchor"></div>
     88  <div class="anchored" style="position-area: top left;"></div>
     89 </div>
     90 
     91 <div class="container">
     92  <div class="anchor"></div>
     93  <div class="anchored" style="position-area: top left;"></div>
     94 </div>
     95 
     96 <br>
     97 
     98 <div class="container">
     99  <div class="anchor"></div>
    100  <div class="anchored" style="position-area: bottom right;"></div>
    101 </div>
    102 
    103 <div class="container">
    104  <div class="anchor"></div>
    105  <div class="anchored" style="position-area: bottom right;"></div>
    106 </div>
    107 
    108 <div class="container">
    109  <div class="anchor"></div>
    110  <div class="anchored" style="position-area: top left;"></div>
    111 </div>
    112 
    113 <div class="container">
    114  <div class="anchor"></div>
    115  <div class="anchored" style="position-area: top left;"></div>
    116 </div>