position-absolute-percentage-inherit-001

position absolute - dimensions and position given by offset percentages and inherit

WeasyPrint

This browser

Assertion
Absolutely positioned boxes can be dimensioned and positioned solely by setting offset 'top', 'right', 'bottom' and 'left' property values with percentage unit and then with inherit keyword. 'inherit' on a offset property makes such offset property take the same computed value as the offset property of the nearest positioned ancestor; in the case of a percentage value, the computed value is the specified percentage value of such nearest positioned ancestor.

Source

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3 
  4  <head>
  5 
  6   <title>CSS Test: position absolute - dimensions and position given by offset percentages and inherit</title>
  7 
  8   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  9   <link rel="help" title="9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'" href="http://www.w3.org/TR/CSS21/visuren.html#position-props">
 10   <link rel="help" title="6.2.1 The 'inherit' value" href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">
 11   <link rel="help" title="4.3.2 Length" href="http://www.w3.org/TR/CSS21/syndata.html#length-units">
 12   <meta content="" name="flags">
 13   <meta content="Absolutely positioned boxes can be dimensioned and positioned solely by setting offset 'top', 'right', 'bottom' and 'left' property values with percentage unit and then with inherit keyword. 'inherit' on a offset property makes such offset property take the same computed value as the offset property of the nearest positioned ancestor; in the case of a percentage value, the computed value is the specified percentage value of such nearest positioned ancestor." name="assert">
 14 
 15   <style type="text/css">
 16   body {margin: 8px;}
 17 
 18   p
 19   {
 20   font: 16px/20px serif;
 21   margin: 1em 0em;
 22   }
 23 
 24   div#rel-pos-grand-parent
 25   {
 26   background-color: lime;
 27   height: 300px;
 28   position: relative;
 29   width: 400px;
 30   }
 31 
 32   div#abs-pos-parent
 33   {
 34   background-color: lime;
 35   bottom: 10%; /* 10% of 300px == 30px */
 36   left: 15%; /* 15% of 400px == 60px */
 37   position: absolute;
 38   right: 20%; /* 20% of 400px == 80px */
 39   top: 30%; /* 30% of 300px == 90px */
 40   /*
 41   height will be 300px minus 90px minus 30px == 180px
 42   width will be 400px minus 60px minus 80px == 260px
 43   */
 44   }
 45 
 46   div#abs-pos-child-red
 47   {
 48   background-color: red;
 49   bottom: inherit; /* 10% of div#abs-pos-parent's height == 18px */
 50   left: inherit; /* 15% of div#abs-pos-parent's width == 39px */ 
 51   position: inherit;
 52   right: inherit; /* 20% of div#abs-pos-parent's width == 52px */ 
 53   top: inherit; /* 30% of div#abs-pos-parent's height == 54px */
 54   /*
 55   height will be 180px minus 54px minus 18px == 108px
 56   width will be 260px minus 39px minus 52px == 169px
 57   */
 58   }
 59 
 60   div#abs-pos-overlapping-lime
 61   {
 62   background-color: lime;
 63   height: 108px;
 64   left: 107px;
 65   position: absolute;
 66   width: 169px;
 67   top: 216px;
 68   }
 69 
 70   /*
 71        8px (body's margin-left)
 72     + 60px  (div#abs-pos-parent's left offset)
 73     + 39px (div#abs-pos-child-red's left offset)
 74   ==================
 75      107px
 76   */
 77 
 78   /*
 79       16px (max(8px, 16px): margin collapsing between body's margin-top and p's margin-top)
 80   +   20px (first line)
 81   +   20px (second line)
 82   +   16px (p's margin-bottom)
 83   +   90px (div#abs-pos-parent's top offset)
 84   +   54px (div#abs-pos-child-red's top offset)
 85   ==================
 86      216px
 87   */
 88   </style>
 89 
 90   </head>
 91 
 92   <body>
 93 
 94   <p>Test passes if there is a filled <br>
 95   bright green rectangle and no red.</p>
 96 
 97   <div id="rel-pos-grand-parent">
 98     <div id="abs-pos-parent">
 99       <div id="abs-pos-child-red"></div>
100     </div>
101   </div>
102 
103   <div id="abs-pos-overlapping-lime"></div>
104 
105  </body>
106 </html>