css网格_CSS网格的怪癖和绝对定位

css网格

就像在其他大多数元素上一样，很有可能在网格项目上使用CSS定位。 但是，有一个或两个怪癖，因此让我们快速看一下以确保避免陷阱。

简单的相对定位

让我们从一个简单的网格开始，该网格包含三列，其中包含九个项目。 每列的宽度为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元素。

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

注意 ：如果我们的网格容器要填充，则其位置将相对于外部填充边界。

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

网格内的绝对位置

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

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

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

继续，如果我们然后向混合中添加偏移量（例如top: 50px; ），则我们的项目将应用该偏移量，同时保持其自身的假想网格位置不变：

关于隐式网格的注释

在上一教程中，我们讨论了Grid如何在需要时创建隐式轨道。 超出我们明确定义的范围。 我们可以将项目放置在这些隐式网格轨道上（如果存在），但是Grid不会为流外部的元素创建这些轨道。

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

结论

为什么需要使用Grid定位？ 最初，这似乎有点过分。 但是，当您考虑使用破碎的网格布局并超越我们已经习惯的简单的“跨上下”网页时，我认为您会发现定位非常有用。

翻译自: https://webdesign.tutsplus.com/tutorials/the-quirks-of-css-grid-and-absolute-positioning--cms-31437

css网格