Question

justify-self对于在Chrome中设置了position: absolute或position: fixed的元素似乎没有任何作用。

对于绝对定位的元素，它将在内联轴上的其包含块内对齐项目，并考虑顶部，左侧，底部和右侧的偏移值。

因此，我希望Chrome浏览器在对齐元素时遵循基于EdgeHTML的Edge和Firefox，但似乎没有任何效果。我没有要测试的Apple机器，所以我不确定Safari如何呈现页面。

正确设置right: 0可以将元素移动到页面的右边缘，但是如果您的页面依赖于元素沿网格轴对齐，则该解决方法将不起作用。

align-self也会发生相同的行为，再次与MDN所说的相反：

它的行为取决于布局模型，如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>

Answer 1

您应注意，因为您正在考虑规范草案中定义的属性：https://drafts.csswg.org/css-align-3/#propdef-justify-self

该规范尚不支持，因此justify-self对不是网格项的元素没有影响，在这种情况下，因为您制作了元素position:absolute，现在它的视口已包含块，不再有网格容器。 position: fixed

的逻辑相同

justify-self实际上仅适用于规范中定义的CSS网格：

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

还请注意，MDN在最后为浏览器提供了对Flexbox的支持，这会导致误导，因为Flexbox中没有justify-self，如规范中所述：

此属性不适用于弹性项目，因为主轴上有多个项目。有关拉伸的信息，请参见flex；有关主轴对齐的信息，请参见justify-content。 [CSS-FLEXBOX-1] ^ref

在MDN中，您还可以阅读：

在flexbox布局中，此属性将被忽略（有关Flexbox中对齐的更多信息）

从CSS网格规范中，您可以了解到：

网格容器的绝对定位子元素已流出，并且不是网格项目，因此不会影响其他项目的放置或网格的大小。
>
确定绝对位置的网格容器子项的静态位置[CSS21]，好像它是网格区域中唯一的网格项目，其边缘与网格容器的填充边缘重合。

在您的情况下，由于您没有定义任何顶部/左侧/右侧/底部，因此静态位置适用，并且您可以看到它只是网格容器的填充框。

添加一些填充，您会注意到该填充将使元素偏移：

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>

但是，如果网格容器的父级也是绝对定位的元素包含块的生成器，请改为使用第9.1节“将网格容器作为包含块”中确定的网格区域。

如果网格容器是包含块（如Micheal_B的答案），则位置将不同。

关于静态位置和绝对位置元素的相关问题：

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

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

Answer 2

只需将position: relative添加到网格容器中即可。

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>

作为Igalia在Chromium / Blink和Safari / WebKit的CSS网格布局实现中所做的工作的一部分，我们一直在实现对定位项的支持。是的，绝对定位在网格内。

实际上，与常规网格项目相比，差异不大。当网格容器是定位项目的包含块时（例如，在网格容器上使用position: relative），它们的放置位置与常规网格项目几乎相同。

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

自我证明无法在Chrome中的绝对位置上工作

2 个答案: