W3C home > Mailing lists > Public > www-style@w3.org > November 2014

Re: [css-grid] Absolutely positioned items and static position

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 26 Nov 2014 10:52:45 -0800
Message-ID: <CAAWBYDC7=WEhUYByqA-FZ+jzJ2hXhKPGpT2zvjMoh0aPctuM6Q@mail.gmail.com>
To: Manuel Rego Casasnovas <rego@igalia.com>
Cc: www-style list <www-style@w3.org>
On Tue, Nov 25, 2014 at 3:22 PM, Manuel Rego Casasnovas <rego@igalia.com> wrote:
> Hi,
>
> I have an extra question regarding absolutely positioned items and the
> static position.
>
> Again, let's use an example:
> <style>
>   .grid {
>     display: grid;
>     grid-template-columns: 100px 100px;
>     grid-template-rows: 50px 50px;
>     position: relative;
>   }
>
>   .absolute {
>     position: absolute;
>     grid-row: 2 / 3;
>     grid-column: 2 / 3;
>   }
>
>   .item {
>     grid-row: 1 / 2;
>     grid-column: 1 / 2;
>   }
> </style>
>
> <div class="grid">
>   <div class="absolute">absolute</div>
> </div>
>
>
> Where the "absolute" element should be placed?
> A) 100x50
> B) 0x0
>
> I guess the answer is A) as according to the spec [1]:
> "The static-position containing block is the containing block of a
> hypothetical box that would have been the first box of the element if
> its specified 'position' value had been 'static' and its specified
> 'float' had been 'none'."
>
> Because of if the position was "static" instead of "absolute", the
> element would be placed at 2nd row and 2nd column (100x50).
>
> Is it right?

Ooh, we don't really specify the static position of absposes with grid
container parents.  Hmm.  Yeah, I guess that (A) falls out of the
definition, and is consistent with our answer if you specify offsets.

> And what would happen in the following case (considering a line height
> of 20px)?
>
> <div class="grid">
>   <div class="item">
>     item
>     <div class="absolute">absolute</div>
>   </div>
> </div>
>
> Where the "absolute" element should be placed?
> A) 100x70
> B) 100x50
> C) 0x20
> D) 0x0
>
> In this case if the position is "static" instead of "absolute" the
> element would be placed in C). But then it'd be ignoring the grid
> placement properties so I'm not sure.

C, due to the normal rules of static position.  The grid properties
just set the containing block for the purpose of offsets.  I suppose
that is somewhat odd, because it's the first time that the static pos
is fully outside of the normal containing block when offsets are
specified.

fantasai, what do you think?  Let the answer fall out of the current
definitions and be C, or specify something special for static position
here?  I lean toward the former.

~TJ
Received on Wednesday, 26 November 2014 18:53:38 UTC

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