如何使侧抽屉不收缩主体，而是在其顶部覆盖

Posted 2023-02-22

【中文标题】如何使侧抽屉不收缩主体，而是在其顶部覆盖

【英文标题】：How to make the side drawer not shrink the main body, but come as an overlay on top of it

【发布时间】：2020-10-23 02:08:03

【问题描述】：

所以，我正在使用此处提供的类似代码 sn-p（材质 UI）：

Code sandbox

当我们点击左上角的菜单图标时，它会打开缩小主体的侧抽屉，我希望它能够位于主体之上，就像你可以说的叠加。我尝试更改 z-index 但这似乎不起作用。非常感谢一些帮助

【问题讨论】：

从纯 css 的角度来看，您正在寻找的是改变位置属性。 position:absolute/fixed 将其设置的元素从 html 流中分离出来，使其能够覆盖其他部分。

非常感谢！那行得通。我在那里定义的drawerOpen 样式中添加了position:fixed，抽屉作为覆盖打开。一个似乎仍然存在的小问题是，当关闭抽屉时，主体仍然表现得就像我们打开抽屉时它收缩了一样。有什么可以解决的吗？

尝试检查关闭是否与除position:fixed 元素之外的任何其他内容交互。固定元素当然不会引起身体运动

【参考方案1】：

官方的做法是使用Drawer 组件的默认值variant (temporary)。在您的示例中，您使用的变体是permanent。 当然你需要稍微改变一下 CSS 来适应自己。

API 文档在这里：https://material-ui.com/api/drawer/ 官方演示也在这里：https://material-ui.com/components/drawers/#temporary-drawer