Navbar #7
Navbar #7
Conversation
| <Container | ||
| sx={{ | ||
| position: 'relative', | ||
| zIndex: 2, |
There was a problem hiding this comment.
🤔 can we accomplish this without z-index? Usually I try to avoid modifying z-index because it can lead to really challenging visual bugs.
There was a problem hiding this comment.
In the Hero component example, the zIndex is used to control the layering of the overlay, background image, and text. It appears to be semantically aligned with MUI's best practices.
There was a problem hiding this comment.
You should be able to just rely on the default stacking order for these elements.
|
Changes ready for review by @newswim |
| backgroundSize: 'cover', | ||
| backgroundPosition: 'center', | ||
| position: 'relative', | ||
| color: 'white', |
There was a problem hiding this comment.
Is the color here for the inner text elements? If so I would add color attributes to the specific element and not this parent.
| {/* Overlay */} | ||
| <Stack | ||
| sx={{ | ||
| position: 'absolute', |
There was a problem hiding this comment.
🤔 seems a little bit odd... I'm not sure why the absolute positioning is being used here. Are you just wanting to center this element?
There was a problem hiding this comment.
Also seems odd to have a Stack without any child elements.. the whole point of Stack is to position child elements.
Changes: