- From: Manuel Rego Casasnovas <rego@igalia.com>
- Date: Fri, 07 Nov 2014 16:23:16 +0100
- To: www-style list <www-style@w3.org>
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