Попытка эмулировать пустую страницу при использовании response-admin, но z-index не накладывает div на меню / боковую панель - PullRequest
0 голосов
/ 18 апреля 2019

Я использую response-admin, который имеет боковую панель и строку меню. Для одного из маршрутов, которые я добавил, я хочу, чтобы он отображал чистый пустой белый экран, без строки меню или боковой панели, чистый пустой. Мне нужно, чтобы страница была пустой, потому что позже я добавлю к ней компонент, который буду использовать iframe для отображения этого компонента в другом приложении, но мне нужен компонент для доступа к хранилищу администратора.

Если есть другой вариант, кроме iframe, я бы мог установить позиционирование, чтобы оно начиналось с заданной точки и заканчивалось с заданной точкой, что было бы предпочтительнее

Я установил собственный маршрут для / blank для отображения моего пустого компонента, который представляет собой просто div с положением свойств css: абсолютный, верхний: 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-индекс пустого компонента

1 Ответ

1 голос
/ 18 апреля 2019

Значения z-index - это противоположность, которую я понимаю о том, что вы пытаетесь, более низкие значения будут позади больших.

т.е:

z-index: 1;

будет позади

z-index: 3;

Вы можете проверить больше в документации.

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

Я прилагаю эту кодовую ручку, чтобы объяснить.

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

надеюсь, это поможет вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...