Containing block for absolutely positioned elements

Amaya 9.2.1 doesn't determine the containing block for absolutely 
positioned elements correctly. Seems a containing block is 
established only if its 'position' property is 'absolute' or 'fixed'.

<http://www.w3.org/TR/REC-CSS2/visudet.html#containing-block-details>:

> 4. If the element has 'position: absolute', the containing block is 
> established by the nearest ancestor with a 'position' other than 
> 'static', in the following way:
>    1. In the case that the ancestor is block-level, the containing 
> block is formed by the padding edge of the ancestor.

<http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>:

> 4. If the element has 'position: absolute', the containing block is 
> established by the nearest ancestor with a 'position' of 'absolute', 
> 'relative' or 'fixed', in the following way:
> [...]
>    2. Otherwise, the containing block is formed by the padding edge 
> of the ancestor.

i.e. if an element has a 'position: relative' it establishes a 
containing block for the nearest absolutely positioned descendants, too.

I've cited one paragraph further to note the containing block edge 
is also incorrect. The edge of the containing block which Amaya 
establishes is the left and right border edge, and the top and 
bottom margin edge of the ancestor which establishes the containing 
block, while it should be:

> ... the containing block is formed by the padding edge of the 
> ancestor.

One will notice absolutely positioned elements don't get their width 
shrink-to-fit, also, according to:

"10.3 Calculating widths and margins
10.3.7 Absolutely positioned, non-replaced elements" 
<http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width>

Here's simple HTML document to test with:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
<head>
   <meta http-equiv="Content-Type"
       content="text/html; charset=US-ASCII">
   <title>Absolute positioning relative to a containg block</title>
   <style media="screen" type="text/css" title="Default Style">
     #filler {
       color: gray;
       margin: 2em 0;
       border: 1px dashed;
       height: 3em;
     }
     #main {
       color: green;
       margin: 0.5em 0;
       border: 2px dashed green;
       padding: 0.5em 0.5em 20em 0.5em;
     }
     #header {
       color: blue;
       margin: 0.5em 0;
       border: 5px dashed;
       padding: 0.5em;
       position: relative;
       /*position: absolute;*/
       height: 5em;
     }
     #header hr { display: none }
     #header .cap-1 {
       position: absolute;
       bottom: 0; left: 0;
       width: 1em; height: 1em;
       background: red;
     }
     #header .cap-2 {
       position: absolute;
       top: 0; right: 0;
       width: 1em; height: 1em;
       background: red;
     }
   </style>
</head>
<body>

<div id="filler"></div>

<div id="header">
   Caption
   <div class="cap-1"></div>
   <div class="cap-2"></div>
   <hr>
</div>

<div id="main">
   <h1>Sample Heading</h1>
   <p>
   Lorem ipsum dolor sit amet...</p>
</div>

</body>
</html>

-- 
Stanimir

Received on Tuesday, 16 August 2005 12:04:17 UTC