Re: Relatively positioned box inside an absolutely positioned box

Clicked the wrong button when replying, not sure if my first message got sent or not. Please forgive me if you received two copies of it. :)

> Your test should specify which point exactly should be horizontally centered and vertically centered

Sorry for the confusion. I mean the horizontal center and the vertical center of #d2. The updated example is here:http://jsbin.com/ocadip/18/edit

> In your test, div#d1's height is not specified explicitly; it depends on its own content.

This rule apples when you need to resolve a percentage value for the "height" property, but in the example, none elements has a percentage value for their "height" property.

> The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom')

According to CSS2.1, Section 10.6.7 'Auto' heights for block formatting context roots:

"If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box."

The height of #d1 is a known value, it's the height of the margin box of #d2, since #d2 is both the topmost and bottommost block-level child box of #d1. Thus the percentage value for "top" of #d2 should be relative to the height of the margin box of #d2, which is also a known value. So it should move #d2 vertically relative to its current position.

I guess the core question here is that when the spec says "the offset is a percentage of the containing block's height", does it mean the used value of height (the height of the margin box of #d2) or the computed value of height (auto). If it's the latter, AFAIK, the spec didn't say how to calculate the percentage value when the containing block's height depends on its content height, comparing to the definition for 'max-height', where it clearly states how to calculate the value when containing block's height depends on content height.

There are two sub-questions:

1. Since "left: -50%" for #d2 works, and the property "left" is calculated exactly the same as property "top", IIRC, only relative to different values (both of which have a computed value 'auto' in the example), why does one work the other doesn't?

2. I can understand the rational behind 'max-height' is to avoid self-dependence, but the 'top' value of a relatively positioned box can not possibly change the height of the box, thus it will never have the self-dependence problem as 'max-height' does. So if the spec were to specify that when a relatively positioned box's containing-block height depend on content height, its percentage top should be 0, it wouldn't have made sense.

Hope I have made myself clear, and thank you very much for taking the time answering my questions.

Glen

On Jun 23, 2013, at 3:13 AM, Gérard Talbot <www-style@gtalbot.org> wrote:

> 
> Le Ven 21 juin 2013 1:39, Glen Huang a écrit :
>> Not sure if this question is qualified to be asked here. It's my desire to
>> find the rules in the CSS spec, which I failed to, that are responsible
>> for the effect that I describe bellow. So I feel it's somewhat
>> spec-related. Hope it's OK to ask here.
>> 
>> Example: http://jsbin.com/ocadip/1/edit
>> 
>> By putting a relatively positioned box inside an absolutely positioned
>> box, I was able to horizontally center a box that has a variable width,
>> but this method failed to work vertically. All major browsers I tested
>> refuse to center it vertically.
>> 
>> I have gone through the CSS2.1 spec multiple times, but couldn't find the
>> responsible rules. Since all major browsers behave consistently on this
>> one, I'm pretty sure I missed some rules. I'm wondering which ones.
>> 
>> Thanks for the help.
>> 
>> Glen
> 
> 
> Glen,
> 
> 
> "Percentages: refer to height of containing block"
> Percentage values for the 'top' property are relative to the element's
> containing block. "The offset is a percentage of the containing block's
> width (for 'left' or 'right') or height (for 'top' and 'bottom')."
> coming from CSS 2.1, Section 9.3.2 Box offsets: 'top', 'right', 'bottom',
> 'left'
> http://www.w3.org/TR/CSS21/visuren.html#position-props
> 
> So, you must first find out what is div#d2's containing block and then
> such containing block's height.
> 
> "if the element's position is 'relative' or 'static', [then] the
> containing block is formed by the content edge of the nearest block
> container ancestor box."
> coming from CSS 2.1, Section 10.1 Definition of "containing block"
> http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
> 
> So, div#d1 is the containing block of div#d2
> 
> "If the height of the containing block is not specified explicitly (i.e.,
> it depends on content height), and this element is not absolutely
> positioned, [then] the [height] value computes to 'auto'."
> coming from CSS 2.1, Section 10.5 Content height: the 'height' property
> http://www.w3.org/TR/CSS21/visudet.html#the-height-property
> 
> In your test, div#d1's height is not specified explicitly; it depends on
> its own content.
> 
> 
> Your test should specify which point exactly should be horizontally
> centered and vertically centered: it could be the top-left corner of the
> red square or it could be the horizontal center and the vertical center of
> the red square itself.
> 
> div#d1 had its top-left corner already horizontally centered and
> vertically centered.
> 
> Gérard
> -- 
> CSS 2.1 Test suite RC6, March 23rd 2011
> http://test.csswg.org/suites/css2.1/20110323/html4/toc.html
> 
> Contributions to CSS 2.1 test suite
> http://www.gtalbot.org/BrowserBugsSection/css21testsuite/
> 
> Web authors' contributions to CSS 2.1 test suite
> http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html
>