Разница между возвышением и z-индексом в материале-интерфейсе? - PullRequest
Новая
       11

Разница между возвышением и z-индексом в материале-интерфейсе?

0 голосов
/ 12 февраля 2019

Я просматривал документацию материала-интерфейса.Это документация говорит:

Некоторые компоненты Material-UI используют z-index, свойство CSS, которое помогает управлять макетом, предоставляя третью ось для организации контента.Мы используем шкалу z-index по умолчанию в Material-UI, которая была разработана для правильного наложения слоев на ящики, модалы, снэк-бары, всплывающие подсказки и т. Д.

Я хочу сделать компонент таким, чтобы напри нажатии кнопки он появляется в верхней части другого компонента и исчезает после завершения задачи.

Мой вопрос заключается в том, следует ли мне использовать свойство высоты, оборачивая компонент popper в бумажный компонент илия должен использовать z-index?Какая разница в использовании возвышения и zIndex в material-ui, так как сам материал-ui использует zIndex для моделирования на третьей оси?

1 Ответ

0 голосов
/ 12 февраля 2019

Как указал ehutchllew в комментариях, высота не связана с z-index и дает бумаге повышенный вид посредством затенения.z-index контролирует, какой элемент находится сверху, когда позиционируемые элементы перекрываются.

Вот пример, демонстрирующий оба: 

import React from "react";
import ReactDOM from "react-dom";
import Paper from "@material-ui/core/Paper";
import CssBaseline from "@material-ui/core/CssBaseline";
import { withStyles } from "@material-ui/core/styles";
const styles = {
  root: {
    width: 100,
    height: 100,
    margin: 10,
    padding: 10
  }
};
function App({ classes }) {
  return (
    <>
      <CssBaseline />
      <Paper elevation={0} classes={classes}>
        Elevation 0
      </Paper>
      <Paper classes={classes}>Default Elevation (2)</Paper>
      <Paper elevation={4} classes={classes}>
        Elevation 4
      </Paper>
      <Paper elevation={8} classes={classes}>
        Elevation 8
      </Paper>
      <Paper elevation={16} classes={classes}>
        Elevation 16
      </Paper>
      <div style={{ marginTop: 30 }}>
        <div
          style={{
            height: 20,
            backgroundColor: "lightblue",
            position: "relative",
            top: 0,
            zIndex: 2
          }}
        >
          zIndex - I have a middle zIndex value
        </div>
        <div
          style={{
            height: 20,
            backgroundColor: "yellow",
            position: "relative",
            top: -10,
            zIndex: 3
          }}
        >
          zIndex - I have the highest
        </div>
        <div
          style={{
            height: 50,
            backgroundColor: "lightgreen",
            position: "relative",
            top: -50,
            zIndex: 1
          }}
        >
          zIndex - I have the lowest
        </div>
      </div>
    </>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

Edit elevation

...