gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 16:53:26 25 4
gpt4 key购买 nike

我正在尝试构建一个 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: absoluteposition: fixed ( which is a form of absolute positioning, with reference to the viewport ),它就会具有新的特征:

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

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

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

关于html - CSS 网格中的响应 block 元素必须位于位置 : fixed,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58144680/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com