CSS 网格和绝对定位（在线演示）

很可能在网格项目上使用 css 定位，就像对大多数其他元素一样。但是，有一两个怪癖，所以让我们快速浏览一下，以确保您避免了这些陷阱。

CSS 网格和绝对定位（在线演示）第1张

简单的相对定位

让我们从一个简单的网格开始，它有九个项目，分为三列。每列是 1fr 宽，除了第三列（感谢 minmax()）将收缩不小于 160px：

grid-template-columns: 1fr 1fr minmax(160px, 1fr);

通过向其中一个项目添加几个规则，我们可以相对定位它：

.item-2 {
  position: relative;
  right: 100px;
  top: 30px;
}

所以就像我们预期的那样，我们声明它item-2是相对定位的，然后定义一些偏移属性（尽管不要尝试在这些上使用 fr 单元，它不会起作用）。

您会注意到，如果您调整窗口大小，网格项目的行为（调整大小）与我们重新定位之前完全相同，并且它仍然自私地保留其在网格中的位置，以防感觉回来。

那么当我们绝对定位该项目时会发生什么？首先，它将自己定位在其最近的祖先位置，该祖先具有声明的位置值。如果您没有position: relative; 在网格容器上设置（例如），则网格项将飞出网格边界以寻找其他要保留的东西，例如 html 元素。

您将在上面的演示中看到，该项目现在绝对位于距网格容器左侧 100 像素和距网格容器顶部 30 像素的位置。它已有效地从文档流中删除，这对于绝对定位的元素来说是正常的。它在网格中的插槽已被填充，item-3其他项目已自行放置以填补剩余的空白。

注意：如果我们的网格容器有填充，则定位将与那些外部填充边界相关。

您还将看到它不再具有它在网格的一部分时使用的尺寸。它已经缩小到其内容的大小。网格不会影响元素的大小，元素也不会以任何方式影响网格的大小。

这可能需要一些时间来适应，但除了正常的偏移量之外，您还可以使用网格放置属性来定位网格项。例如，让我们item-2绝对打开grid-area: 3 / 2;（换句话说，从第三行开始，第二列开始）。

它看起来很奇怪，但是您可以看到该项目仍然不受网格大小的影响并且仍然在流程之外，它已经粗暴地将自己定位在item-9. 就好像它有一个自己的网格，在原来的顶部。

注意：如果需要，z-index 将允许您更改项目的堆叠顺序。

继续前进，如果我们然后在混合中添加一个偏移量（top: 50px;例如），我们的项目将应用该偏移量，同时保持它自己想象的网格位置：

在我们之前的教程中，我们讨论了 Grid 如何在需要时创建隐式轨迹；超出我们明确定义的轨道。如果它们存在，我们可以将项目定位在那些隐式网格轨道上，但 Grid 不会为流之外的元素创建这些轨道。

在下面的演示中，我们已经定位item-2，grid-area: 2 / 4;但这只是可能的item-6，因为仍在流程中，已经提示 Grid 为我们创建这些额外的轨道。

为什么需要使用 Grid 进行定位？最初它可能看起来有点矫枉过正。但是，当您考虑打破网格布局并超越我们已经习惯的简单的“上下”网页时，我认为您会发现定位非常有用。

文章目录

简单的相对定位

稍微复杂一点的绝对定位

网格内的绝对位置

结论