import * as React from 'react' ;
import Box from "@mui/material/Box" ;
function App() {
return (
<>
<Box
sx={{
bgcolor: "pink" ,
color: "grey" ,
border: "1px solid" ,
width: "100%" ,
borderColor: "black" ,
p: 2,
borderRadius: 2,
fontSize: "0.875rem" ,
fontWeight: "700" ,
position: "absolute" ,
top: 0,
left: "0%" ,
zIndex: "mobileStepper" ,
}}
>
z-index mobile stepper
</Box>
<Box
sx={{
bgcolor: "black" ,
color: "white" ,
border: "1px solid" ,
width: "100%" ,
borderColor: "black" ,
p: 2,
borderRadius: 2,
fontSize: "0.875rem" ,
fontWeight: "700" ,
position: "absolute" ,
top: 5,
left: "13%" ,
zIndex: "fab" ,
}}
>
z-index fab
</Box>
<Box
sx={{
bgcolor: "blue" ,
color: "white" ,
width: "100%" ,
border: "1px solid" ,
borderColor: "black" ,
p: 2,
borderRadius: 2,
fontSize: "0.875rem" ,
fontWeight: "700" ,
position: "absolute" ,
top: 10,
left: "20%" ,
zIndex: "speedDial" ,
}}
>
z-index speed dial
</Box>
<Box
sx={{
bgcolor: "orange" ,
color: "blue" ,
width: "100%" ,
border: "1px solid" ,
borderColor: "black" ,
p: 2,
borderRadius: 2,
fontSize: "0.875rem" ,
fontWeight: "700" ,
position: "absolute" ,
top: 15,
left: "30%" ,
zIndex: "appBar" ,
}}
>
z-index app bar
</Box>
<Box
sx={{
bgcolor: "pink" ,
color: "blue" ,
width: "100%" ,
border: "1px solid" ,
borderColor: "black" ,
p: 2,
borderRadius: 2,
fontSize: "0.875rem" ,
fontWeight: "700" ,
position: "absolute" ,
top: 20,
left: "41%" ,
zIndex: "drawer" ,
}}
>
z-index drawer
</Box>
<Box
sx={{
bgcolor: "red" ,
color: "blue" ,
width: "100%" ,
border: "1px solid" ,
borderColor: "black" ,
p: 2,
borderRadius: 2,
fontSize: "0.875rem" ,
fontWeight: "700" ,
position: "absolute" ,
top: 25,
left: "52%" ,
zIndex: "modal" ,
}}
>
z-index modal
</Box>
<Box
sx={{
bgcolor: "red" ,
color: "blue" ,
width: "100%" ,
border: "1px solid" ,
borderColor: "black" ,
p: 2,
borderRadius: 2,
fontSize: "0.875rem" ,
fontWeight: "700" ,
position: "absolute" ,
top: 25,
left: "52%" ,
zIndex: "modal" ,
}}
>
z-index modal
</Box>
<Box
sx={{
bgcolor: "blue" ,
color: "white" ,
width: "100%" ,
border: "1px solid" ,
borderColor: "black" ,
p: 2,
borderRadius: 2,
fontSize: "0.875rem" ,
fontWeight: "700" ,
position: "absolute" ,
top: 30,
left: "63%" ,
zIndex: "snackbar" ,
}}
>
z-index snackbar
</Box>
<Box
sx={{
bgcolor: "green" ,
color: "white" ,
width: "100%" ,
border: "1px solid" ,
borderColor: "black" ,
p: 2,
borderRadius: 2,
fontSize: "0.875rem" ,
fontWeight: "700" ,
position: "absolute" ,
top: 35,
left: "75%" ,
zIndex: "tooltip" ,
}}
>
z-index tooltip
</Box>
</>
);
}
export default App;
|