[app bar] Box background covers AppBar shadow

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Placing a Box component with a background color after an AppBar (with position="static") “covers” the shadow of the elevated AppBar. Furthermore, modifying the zIndex of the Box did not change how the shadow of the AppBar was cast (or not cast) onto it.

Expected behavior 🤔

I would have assumed that an elevated object (such as the AppBar) is above any non-elevated objects (such as a Box component) and therefore casts its shadow onto the non-elevated objects.

Steps to reproduce 🕹

Here is a simple example:
https://codesandbox.io/s/appbar-shadow-issue-sqq694

Open the example and toggle the switch to see the shadow of the AppBar appearing and disappearing when the background color of the Box is changed between “transparent” and “background.paper”.

Context 🔦

When creating a simple application for a school project I used a couple of your templates and examples as a starting point:

• The App bar with responsive menu example for the header.
• The checkout template as base for the content of one subpage.
• The album template as base for the content of another subpage.

I later realized that the AppBar shadow was only visible on the Checkout based subpage, which was unexpected. After some testing I realized that the main difference between the templates was that the Album template used boxes with background colors.

I now also see that the Album template uses an AppBar with position="relative" instead of position="static" (as the AppBar example my header is based on) and that their AppBar shadow is visible, so the problem seems to be related to position="static".

Your environment 🌎

See the codesandbox example (it uses the same environment as your template)

Start with the linked CodeSandbox reproduction and compare the AppBar examples with the checkout and album templates under docs/data/material/getting-started/templates. Check how position="static" and a Box background affect the AppBar shadow, then verify that the shadow remains visible with the static AppBar and background-colored Box.