Re: Relatively positioned box inside an absolutely positioned box

Glen Huang <curvedmark@gmail.com> wrote Sun, 23 Jun 2013 15:37:57 +0400:

>> I believe the reason is that at the time browser resolves #d1's height  
>> for calculating #d2 it isn't known yet.
> If that's the reason, why do browsers support the :last-child selector?  
> It has the same problem.
Not really. For :last-child and :nth-* pseudo-classes browser need only to  
have a look onto document tree for siblings. I presume the tree is already  
constructed after markup parsing. (BTW, I've read that if there is such a  
sibling selector in CSS including ‘+’, it switches Webkit to the slower  
rendering mode.)

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.

> Since you are saying the problem lies within browsers themselves. Can I  
> assume that CSS2.1 does allow centering boxes this way, but all >major  
> browsers choose not to comply? Or the spec is vague about this, and thus  
> browsers choose to compute to 0 as you said?
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.
>> Actually there is workaround for the case
> Wow, didn't think of it. This is a nice trick. Thanks for the heads up.  
> Will apply it in the future. Still, my current goal is to really  
> >understand how some strange effects in CSS come in being.
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).