我正在尝试构建一个 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 上。
关于谁来完成这件事有什么想法吗？
谢谢!
最佳答案
如果您希望该元素保留为网格项，那么答案是“您不能”。
一旦元素具有 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 可以是另一个网格容器并保持在流中。
关于html - CSS 网格中的响应 block 元素必须位于位置 : fixed，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58144680/