In the commentary section, ehutchllew pointed out that elevation does not affect z-index and merely provides a raised appearance to the Paper element through shadowing. The z-index property determines the stacking order of positioned elements when they overlap.
Below is a sample code snippet illustrating both concepts:
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);
https://codesandbox.io/s/jpolv9wmkw