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

【问题标题】：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 元素之外的任何其他内容交互。固定元素当然不会引起身体运动

标签： reactjs material-ui frontend

【解决方案1】：

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

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

【讨论】：