absolutely positioned element and percentage width

r.p. ancestor

static parent: width:50%;

a.p. child: width:50%; right:0; top:0;

  1. <div id="rp_ancestor"> ...
  2. <div id="static_parent"> ...
  3. <div id="ap_child"> ...
  4. </div>
  5. </div>
  6. </div>

Definition of 'containing block': ... 4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed'...

(CSS2.1 10.1).

Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the width of the padding box of that element. This is a change from CSS1, where the percentage width was always calculated with respect to the content box of the parent element ...

(CSS2.1 10.2).