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

[css-grid] Absolutely positioned grid items

From: Manuel Rego Casasnovas <rego@igalia.com>
Date: Fri, 07 Nov 2014 16:23:16 +0100
Message-ID: <545CE3E4.1000807@igalia.com>
To: www-style list <www-style@w3.org>

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>

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
But, if you specify "justify-self: center;" in the abspos item, it'll be
centered within the grid container left and right padding edges.

* Example 2:
<div style="display: grid; position: relative">
  <div style="position: absolute;">Absolute</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).

Thank you very much,

[1] http://dev.w3.org/csswg/css-grid/#static-position
[2] http://dev.w3.org/csswg/css-grid/#abspos-items
Received on Friday, 7 November 2014 15:23:50 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:45 UTC