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


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
Received on Saturday, 22 June 2013 19:14:28 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:12 UTC