Re: Relatively positioned box inside an absolutely positioned box

> 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 make sense.

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

Glen

Received on Saturday, 22 June 2013 22:53:47 UTC