MD Settings: Expanding cards should not overlap header

chrome/browser/resources/settings/settings_ui/settings_ui.html

Index: chrome/browser/resources/settings/settings_ui/settings_ui.html
diff --git a/chrome/browser/resources/settings/settings_ui/settings_ui.html b/chrome/browser/resources/settings/settings_ui/settings_ui.html
index 892ebe1003962d2b80b5d233a83b1894854c633b..338c5bd4271eb6d998885b2dc42f3a4fdd7f30d6 100644
--- a/chrome/browser/resources/settings/settings_ui/settings_ui.html
+++ b/chrome/browser/resources/settings/settings_ui/settings_ui.html
@@ -94,6 +94,12 @@
         --paper-input-max-width: 200px;
       }
 
+      paper-header-panel {
+        --paper-header-panel-shadow: {
+          z-index: 100;

[Dan Beam, 2016/05/10 00:46:37]

in a perfect world, we would not treat z-index as absolute, but as stacking
context-relative things so every level would not fight eachother

[michaelpg, 2016/05/10 02:29:13]

My next version is slightly perfecter.

Giving the shadow a z-index > the container keeps the shadow on top; giving the
container a z-index makes it a stacking context that the expanding card stays
within.

+        };
+      }
+
       paper-toolbar {
         --paper-toolbar-height: 56px;
         --paper-toolbar-sm-height: 56px;
@@ -103,6 +109,7 @@
         --paper-toolbar: {
           background-color: var(--settings-title-bar-background-color);
         };
+        z-index: 100;
       }
 
       /* Prevent paper-toolbar from setting the margin-right to 24px. */