material-ui中的高程和z-index之间的区别？答案

【问题标题】：Difference between elevation and z-index in material-ui?material-ui中的高程和z-index之间的区别？
【发布时间】：2019-07-06 06:02:13
【问题描述】：

我正在浏览 material-ui 的文档。它的文档说：

几个 Material-UI 组件使用 z-index，这是一个 CSS 属性，通过提供第三个轴来排列内容来帮助控制布局。我们在 Material-UI 中使用默认的 z-index 比例，该比例旨在正确分层抽屉、模式、快餐栏、工具提示等。

我想制作一个组件，以便在单击按钮时，它会弹出另一个组件的顶部并在任务完成后消失。

我的问题是我应该通过将 popper 组件包装在纸质组件中来使用海拔属性，还是应该使用 z-index？在material-ui中使用elevation和zIndex有什么区别，因为material-ui本身使用zIndex作为第三轴的样式？

【问题讨论】：

zIndex 控制哪个元素在顶层具有优先级 - 所以是的，可以在您的场景中使用它。高度是美学的，因为它会应用一些阴影使某些元素看起来是“浮动的”或“升高的”。
@ehutchllew 因为这是在回答问题，而不仅仅是要求澄清，请将其添加为答案而不是评论，以便将来有相同问题的用户更容易找到它。

标签： reactjs css material-ui z-index

【解决方案1】：

正如 cmets 中的 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);

【讨论】：

很好的解释...这正是我想要的。