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

Question

I am using react-admin which has a sidebar and menubar. For one of the routes I added, I want it to display a pure blank white screen, no menu bar or sidebar, pure blank. I need the page to be blank because I will later be adding a component to it that I will be using iframe to display that component in another application, but I need the component to have access to the admin store.

If there is another option other than iframe that I would be able to set positioning to start at a set point and end at a set point that would be preferable

I set a custom route for /blank to render my blank component, which is just a div with the css properties position: absolute, top: 0, left: 0, height: 100%, width: 100%, z-index: -1 but the sidebar and menubar still overlap it no matter how far negative I set the z-index

in 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);

in customRoutes.js

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

the sidebar and menubar still appear over the blank component no matter how far negative I set the z-index of the blank component

Answer 1

z-index values are the oposite im understanding about you are triying, lower values will be behind bigger ones.

i.e:

z-index: 1;

will be behind

z-index: 3;

You can check more in the documentation.

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

I attach this code pen to explain.

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

hope it helps you.