尝试使用react-admin模拟空白页面，但z-index不会覆盖菜单/侧边栏上的div

Question

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

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

我为/ blank设置了一个自定义路径来渲染我的空白组件，这只是一个带有css属性位置的div：绝对，顶部：0，左：0，高度：100％，宽度：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

希望它能帮助你。