tor-browser

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

anchor-center-overflow-005.html (2024B)

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