CODEWITHSUNDEEP
htmlcsscss-grid
potato5
potato5

Reputation: 63

Justify-self not working on absolutely positioned elements in Chrome

justify-self doesn't appear to be having any effect for elements with position: absolute or position: fixed set in Chrome.

MDN says

For absolutely-positioned elements, it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right.

so I expected Chrome to follow EdgeHTML-based Edge and Firefox in aligning the elements, but it doesn't appear to have any effect. I don't have an Apple machine to test on so I'm not sure how Safari would render the page.

Setting right: 0 correctly moves the element to the right edge of the page, but that workaround doesn't work if your page relies on having elements aligned along a grid axis.

The same behaviour also occurs with align-self, again contradicting what MDN says:

Its behavior depends on the layout model, as described for justify-self.

body {
  display: grid;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

#absolute {
  position: absolute;
  align-self: end;
  justify-self: end;
}
<div id="absolute">
  <p>This element is absolutely positioned at the container's end.</p>
</div>

Upvotes: 4

Views: 1341

Answers (2)

Temani Afif
Temani Afif

Reputation: 273649

You should pay attention because you are considering the property that is defined in a draft specification: https://drafts.csswg.org/css-align-3/#propdef-justify-self

This specification has no support yet so justify-self will have no effect on element that aren't grid items which is the case here since you made the element position:absolute which will now have the viewport as containing block and no more the grid container. Same logic for position: fixed

justify-self actually only works for CSS grid as defined in the specification:

https://www.w3.org/TR/css-grid-1/

Also note that the MDN is giving a browser support for Flexbox at then end which is missleading since there is no justify-self in Flexbox like described in the specification:

This property does not apply to flex items, because there is more than one item in the main axis. See flex for stretching and justify-content for main-axis alignment. [CSS-FLEXBOX-1] ref

And in the MDN you can also read:

In flexbox layouts, this property is ignored (more about alignment in Flexbox)

From the CSS grid specification you can read that:

An absolutely-positioned child of a grid container is out-of-flow and not a grid item, and so does not affect the placement of other items or the sizing of the grid.

The static position [CSS21] of an absolutely-positioned child of a grid container is determined as if it were the sole grid item in a grid area whose edges coincide with the padding edges of the grid container.

In your case the static position applies since you didn't define any top/left/right/bottom and as you can see it's simply the padding box of the grid container.

Add some padding and you will notice that the element will get offseted by this padding:

body {
  display: grid;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 50px;
}

#absolute {
  position: absolute;
  align-self: end;
  justify-self: end;
}
<div id="absolute">
  <p>This element is absolutely positioned at the container's end.</p>
</div>

However, if the grid container parent is also the generator of the absolutely positioned element’s containing block, instead use the grid area determined in §9.1 With a Grid Container as Containing Block.

In case the grid container is the containing block (like in the answer of Micheal_B) then the position will be different.

Related question about static position and absolute postioned elements:

Why aren't my absolutely-positioned elements located where I expect?

Cross-browser issues with fixed-position flexbox and VW units

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371789

Just add position: relative to the grid container.

body {
  display: grid;
  height: 100vh;
  margin: 0;
  position: relative; /* new */
}

#absolute {
  position: absolute;
  align-self: end;
  justify-self: end;
}
<div id="absolute">
  <p>This element is absolutely positioned at the container's end.</p>
</div>

As part of the work done by Igalia in the CSS Grid Layout implementation on Chromium/Blink and Safari/WebKit, we’ve been implementing the support for positioned items. Yeah, absolute positioning inside a grid.

Actually there’s not such a big difference compared to regular grid items. When the grid container is the containing block of the positioned items (e.g. using position: relative on the grid container) they’re placed almost the same than regular grid items.

https://blogs.igalia.com/mrego/2016/05/27/css-grid-layout-and-positioned-items/

Upvotes: 2

Related Questions