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

Re: [css-grid] Absolutely positioned grid items

From: fantasai <fantasai.lists@inkedblade.net>
Date: Fri, 07 Nov 2014 11:59:03 -0500
Message-ID: <545CFA57.3050003@inkedblade.net>
To: www-style@w3.org
On 11/07/2014 10:23 AM, Manuel Rego Casasnovas wrote:
> Hi,
> I've been trying to understand how abspos items should behave under
> different conditions. We've 2 points in the specs talking about it:
> * 4.3. Static Position of Grid Container Children [1]
> * 8.4. Absolutely-positioned Grid Items [2]
> So, let me show some examples in order to try to understand how it
> should work.
> * Example 1:
> <div style="display: grid;">
>    <div style="position: absolute;">Absolute</div>
> </div>
> It seems to me that this particular case should work the same than if
> the parent is a regular block.
> If you set "left: 0px;" it'll move the item to the left border of the
> viewport.
> But, if you specify "justify-self: center;" in the abspos item, it'll be
> centered within the grid container left and right padding edges.


Although I'm not sure blocks behave that way. (Flexbox does, though.)

> * Example 2:
> <div style="display: grid; position: relative">
>    <div style="position: absolute;">Absolute</div>
> </div>
> This case seems to be different, as the abspos item will be placed in
> the top-left corner using the padding edges of the grid container.
> Then if you set "left: 100px;" it'll be moved 100px to the right from
> the left padding edge of the grid container.
> Again, if you set "justify-self: center;" in the abspos item, it'll be
> centered within the grid left and right padding edges.
> Are these assumptions right?


> And, what would happen if you mix "left: 100px;" and "justify-self:
> center;" in the abspos item?
> I guess that it should be shifted 100px from the left padding edge
> (ignoring the justify-self property in this case).


And if you set both 'left: 100px' and 'right: 100px', the box will
be centered between those two offsets.

Side note: I think the behavior specified for 'stretch' on replaced
absolutely-positioned boxes is wrong. Will file a separate issue on

Received on Friday, 7 November 2014 16:59:31 UTC

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