html - CSS 网格中的响应 block 元素必须位于位置 : fixed

Question

我正在尝试构建一个 UI，其部分为 display:grid 和 grid-template-columns: 1fr 3fr。

然后我有 2 个 block 元素应该放在这些列中(我分别使用了 grid-column: 1/2 和 grid-column: 2/3)。

现在，我的问题是我希望左侧的 block (在 1fr 单元格/区域中)具有固定位置。它应该是一个持久的导航侧边栏。但是，当我使用 position: fixed 时，该 block 已完全从网格中移除，因此响应速度不再是真正的因素。

我尝试在主网格项中嵌套一个容器并为其指定固定位置，但是当我调整视口(viewport)进行测试时，固定容器溢出/重叠到 3fr block 上。

关于谁来完成这件事有什么想法吗？

谢谢!

Answer 1

如果您希望该元素保留为网格项，那么答案是“您不能”。

一旦元素具有 position: absolute 或 position: fixed ( which is a form of absolute positioning, with reference to the viewport )，它就会具有新的特征:

• 元素从文档流中移除
• 该元素已从 grid formatting context 中删除
• 元素不再是网格项

所以网格项不能很好地用于固定定位。

但是，将 position: fixed 应用于 grid 容器 不会有问题。

考虑分别管理您的 #left 和 #right 元素。 #left 可以是固定位置的网格容器。 #right 可以是另一个网格容器并保持在流中。

• > Percentage padding / margin on grid item ignored in Firefox
• > Why doesn't percentage padding / margin work on flex items in Firefox and Edge?