tor-browser

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

anchor-center-overflow-005-ref.html (2044B)

      1 <!DOCTYPE html>
      2 <title>anchor-center overflow adjustments (anchored < inset area, with margin)</title>
      3 <style>
      4 .abs-cb {
      5  display: inline-block;
      6  box-sizing: border-box;
      7  border: 5px solid;
      8  width: 100px;
      9  height: 100px;
     10  position: relative;
     11 }
     12 
     13 .anchor {
     14  width: 20px;
     15  height: 20px;
     16  background: pink;
     17  position: absolute;
     18  inset: 0;
     19 }
     20 
     21 .positioned {
     22  position: absolute;
     23  width: 50px;
     24  height: 50px;
     25  margin: 5px;
     26  background: purple;
     27 }
     28 
     29 .anchor.tl {
     30  align-self: start;
     31  justify-self: start;
     32 }
     33 
     34 .anchor.tr {
     35  align-self: start;
     36  justify-self: end;
     37 }
     38 
     39 .anchor.bl {
     40  align-self: end;
     41  justify-self: start;
     42 }
     43 
     44 .anchor.br {
     45  align-self: end;
     46  justify-self: end;
     47 }
     48 
     49 .positioned.bl {
     50  left: 0;
     51  top: 20px;
     52 }
     53 
     54 .positioned.lr {
     55  left: 20px;
     56  top: 0;
     57 }
     58 
     59 
     60 .positioned.bc {
     61  top: anchor(bottom);
     62  justify-self: anchor-center;
     63 }
     64 
     65 .positioned.tc {
     66  bottom: anchor(top);
     67  justify-self: anchor-center;
     68 }
     69 
     70 .positioned.cr {
     71  left: anchor(right);
     72  align-self: anchor-center;
     73 }
     74 
     75 .positioned.cl {
     76  right: anchor(left);
     77  align-self: anchor-center;
     78 }
     79 </style>
     80 </style>
     81 <div class=abs-cb>
     82  <div class="anchor tl"></div>
     83  <div class=positioned style="left: 0; top: 20px;"></div>
     84 </div
     85 ><div class=abs-cb>
     86  <div class="anchor tl"></div>
     87  <div class=positioned style="left: 20px; top: 0;"></div>
     88 </div
     89 ><div class=abs-cb>
     90  <div class="anchor tr"></div>
     91  <div class=positioned style="right: 0; top: 20px;"></div>
     92 </div
     93 ><div class=abs-cb>
     94  <div class="anchor tr"></div>
     95  <div class=positioned style="right: 20px; top: 0px;"></div>
     96 </div><br>
     97 <div class=abs-cb>
     98  <div class="anchor bl"></div>
     99  <div class=positioned style="bottom: 20px; left: 0;"></div>
    100 </div
    101 ><div class=abs-cb>
    102  <div class="anchor bl"></div>
    103  <div class=positioned style="bottom: 0; left: 20px;"></div>
    104 </div
    105 ><div class=abs-cb>
    106  <div class="anchor br"></div>
    107  <div class=positioned style="bottom: 20px; right: 0;"></div>
    108 </div
    109 ><div class=abs-cb>
    110  <div class="anchor br"></div>
    111  <div class=positioned style="bottom: 0; right: 20px;"></div>
    112 </div>