尝试在使用 react-admin 时模拟空白页面，但 z-index 未覆盖 div over menu/sidebar

Question

我正在使用具有侧边栏和菜单栏的 react-admin。对于我添加的路由之一，我希望它显示一个纯空白的白色屏幕，没有菜单栏或侧边栏，纯空白。我需要该页面为空白，因为稍后我将向其中添加一个组件，我将使用 iframe 在另一个应用程序中显示该组件，但我需要该组件能够访问管理商店。

如果除了 iframe 之外还有其他选项，我可以将定位设置为从一个设定点开始并在一个设定点结束，那将是更可取的

我为 /blank 设置了一个自定义路由来渲染我的空白组件，它只是一个 div 和 css 属性 position: absolute, top: 0, left: 0, height: 100%, width: 100%, z-index: -1 但无论我设置 z-index

负多远侧边栏和菜单栏仍然重叠

在blank.js

import { withStyles } from '@material-ui/core';

const styles = {
    blank: {
        zIndex: -1,
        left: 0,
        top: 0,
        height: '100%',
        width: '100%',
        backgroundColor: 'white',
        position: 'absolute',
    }
};

const blank = ({ classes }) => (
    <div className={classes.blank} />
)

export default withStyles(styles)(blank);

在customRoutes.js

<Route exact path="/blank" component={blank} />

无论我将空白组件的 z-index 设置多负，侧边栏和菜单栏仍然出现在空白组件上

Answer 1

z-index 值是我对你正在尝试的理解的相反值，较低的值将落后于较大的值。

即：

z-index: 1;

会落后

z-index: 3;

您可以在文档中查看更多内容。

https://developer.mozilla.org/es/docs/Web/CSS/z-index

我附上这支码笔来说明一下

https://codepen.io/ChemaAlfonso/pen/axYxrR

希望对你有帮助。

尝试在使用 react-admin 时模拟空白页面，但 z-index 未覆盖 div over menu/sidebar

Trying to emulate a blank page while using react-admin, but z-index is not overlaying div over menu/sidebar

css

z-index

react-admin

在blank.js

在customRoutes.js