[css-grid] Absolutely positioned grid items

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.

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

Thank you very much,
  Rego

[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