Question

我正在查看material-ui的文档。文档说：

多个Material-UI组件利用z-index，即CSS属性通过提供第三个轴来安排内容来帮助控制布局。我们在Material-UI中使用默认的z-index比例，该比例旨在正确放置抽屉，模态，小吃栏，工具提示等。

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

我的问题是应该通过将波普尔组件包裹在纸组件中来使用高程属性，还是应该使用z-index？ material-ui本身使用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索引之间的区别？

1 个答案: