- From: fantasai <fantasai.lists@inkedblade.net>
- Date: Fri, 07 Nov 2014 11:59:03 -0500
- 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. 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