Re: Relatively positioned box inside an absolutely positioned box

On Jun 24, 2013, at 12:04 AM, Lev Solntsev <greli@mail.ru> wrote:

> However, to compute the height value browser needs not only to look onto the tree but to compute all CSS properties of siblings and their children – all the subtree. It's a much more complex job.

I agree with you, :last-child is very easy to apply to, and I think I have a better understanding now. But when is another counter example:

HTML: <div id="d1"><div id="d2"></div>text</div>
CSS: #d1 { position: relative } #d2 { position: absolute; top: 10% }

I know you said below that out of flow children are exceptions. but the point here is that browsers are able to calc the height of elements that depends on content height before the elements are closed, even though it's very expensive like you said.

BTW, thank you for letting me know the article about browser internals, it's very informative.

I haven't said that. I don't want to dive deep, but AFAIK CSS 2 point is that used height value computes to the concrete value if it's set in CSS or it's a replaced element which has sizes by itself. Otherwise its used value computes to zero. The only notable exception are positioned elements which are removed from the flow. And I've seen a discrepancy within tables in Webkit.

This explains a lot, but where do you get that conclusion? The CSS spec doesn't seem to have stated that. Or did you inferred it from the definitions of height, min-height and alike properties?

I can understand the rational behind the conclusion is to avoid self-dependence, for a in-flow child needs to know the height of its containing block, it's very likely to change it's own height, and thus in turn changes the containing block's height.

But the top value here is an exception, I wonder why do all browsers failed to consider that.

> I haven't mentioned, but if you actually need #d1 to be centered itself the transform property can be used right on it. However, take in account that the position for layout is misplaced form the visual one (e.g. by adding negative margins).

Thanks for the heads up. :)