material-ui 中的高程和 z-index 之间的差异？

Question

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

Several Material-UI components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Material-UI that's been designed to properly layer drawers, modals, snackbars, tooltips, and more.

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

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

Answer 1

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

material-ui 中的高程和 z-index 之间的差异？

Difference between elevation and z-index in material-ui?

css

z-index

reactjs

material-ui