Re: [css-grid] Absolutely positioned grid items

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.

Yes.

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?

Yes.

> 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).

Exactly.

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
that...

~fantasai

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