Search code examples
reactjscssmaterial-uiz-index

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

I was going through the documentation of material-ui. It's documentation says:

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.

I want to make a component such that on button click, it pops on the top of another component and disappears after a task is finished.

My question is should I use elevation property by wrapping up the popper component in a paper component or should I use z-index? What is the difference in the usage of elevation and zIndex in material-ui, as material-ui itself uses zIndex for the styling on third axis?

Solution

  • As ehutchllew indicated in the comments, elevation is unrelated to z-index and gives the Paper a raised look via shadowing. z-index controls which element is on top when positioned elements overlap.

    Here is an example demonstrating both:

    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