MD Settings: Expanding cards should not overlap header

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

 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-drawer-panel/paper-drawer-panel.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-header-panel/paper-header-panel.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://md-settings/direction_delegate.html">
@@ skipping 76 matching lines @@
           top: 4px;
         };
         --paper-input-container-input-color: var(--settings-title-bar-color);
         --paper-input-container-label: {
           font-size: 81.25%; /* go to 13px from 16px */
           top: 3px; /* Special positioning needed for UX design. */
         };
         --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;
         --paper-toolbar-content: {
           font-size: 123.08%; /* go to 16px from 13px */
         }
         --paper-toolbar: {
           background-color: var(--settings-title-bar-background-color);
         };
+        z-index: 100;
       }
 
       /* Prevent paper-toolbar from setting the margin-right to 24px. */
       paper-icon-button#menu-button {
         flex-shrink: 0;
         /* TODO(dschuyler): this margin is on the right regardless of language
          * direction (e.g. rtl). Make a patch for paper-toolbar in Polymer. */
         margin-right: 0;
       }
 
@@ skipping 45 matching lines @@
             </paper-input>
           </div>
         </paper-toolbar>
         <settings-main prefs="{{prefs}}" current-route="{{currentRoute}}">
         </paper-icon-button>
       </paper-header-panel>
     </paper-drawer-panel>
   </template>
   <script src="settings_ui.js"></script>
 </dom-module>