tor-browser

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

align-items-static-position.html (1946B)

      1 <!DOCTYPE html>
      2 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
      3 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-auto">
      4 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-auto">
      5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1930561">
      6 <link rel="match" href="align-items-static-position-ref.html">
      7 <meta name="assert" content="Ensures that absolutely positioned elements take (align|justify)-item into account only when being static-positioned.">
      8 <style>
      9 .flex {
     10  display: flex;
     11  align-items: center;
     12  width: 100%;
     13  height: 100%;
     14 }
     15 
     16 .grid {
     17  display: grid;
     18  justify-items: center;
     19  align-items: center;
     20  width: 100%;
     21  height: 100%;
     22 }
     23 
     24 .container {
     25  border: 1px solid;
     26  position: relative;
     27  width: 100px;
     28  height: 100px;
     29  display: inline-block;
     30  margin-right: 5px;
     31 }
     32 
     33 .abs {
     34  width: 50px;
     35  height: 50px;
     36  position: absolute;
     37  background: purple;
     38 }
     39 
     40 .static-positioned-inline {
     41  left: auto;
     42  right: auto;
     43 }
     44 
     45 .static-positioned-block {
     46  top: auto;
     47  bottom: auto;
     48 }
     49 
     50 .positioned-inline {
     51  left: 0;
     52  right: 0;
     53 }
     54 
     55 .positioned-block {
     56  top: 0;
     57  bottom: 0;
     58 }
     59 </style>
     60 <div class="container"><div class="flex">
     61  <div class="abs static-positioned-inline static-positioned-block"></div>
     62 </div></div>
     63 <div class="container"><div class="flex">
     64  <div class="abs static-positioned-inline positioned-block"></div>
     65 </div></div>
     66 <br>
     67 <div class="container"><div class="grid">
     68  <div class="abs static-positioned-inline static-positioned-block"></div>
     69 </div></div>
     70 <div class="container"><div class="grid">
     71  <div class="abs static-positioned-inline positioned-block"></div>
     72 </div></div>
     73 <div class="container"><div class="grid">
     74  <div class="abs positioned-inline static-positioned-block"></div>
     75 </div></div>
     76 <div class="container"><div class="grid">
     77  <div class="abs positioned-inline positioned-block"></div>
     78 </div></div>
     79 <br>