W3C home > Mailing lists > Public > www-style@w3.org > June 2013

Re: Relatively positioned box inside an absolutely positioned box

From: Gérard Talbot <www-style@gtalbot.org>
Date: Sat, 22 Jun 2013 15:13:56 -0400
Message-ID: <16d734c8f8608a4001338c852ce0c98f.squirrel@ed-sh-cp3.entirelydigital.com>
To: "Glen Huang" <curvedmark@gmail.com>
Cc: "W3C www-style mailing list" <www-style@w3.org>

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


"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',

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"

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

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.

CSS 2.1 Test suite RC6, March 23rd 2011

Contributions to CSS 2.1 test suite

Web authors' contributions to CSS 2.1 test suite
Received on Saturday, 22 June 2013 19:14:28 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:31 UTC