MD Settings: Expanding cards should not overlap header, take 2.

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 101 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;
       }
 
+      /*
+       * These header elements must create stacking contexts when a section is
+       * expanding to show a sub-page. (It's simpler for them to always create
+       * these stacking contexts, so we do.) But for the overlay to work, the
+       * paper-header-panel's other descendents (rooted at settings-main) must
+       * never create stacking contexts while a dialog is showing. This means
+       * we cannot animate a section expanding/collapsing while a dialog is
+       * shown (which makes good UX sense anyway.) I have discovered a truly
+       * non-marvellous proof of this, which this comment cannot contain:

[Dan Beam, 2016/05/18 00:27:32]

cute

+       * https://goo.gl/CCzijE
+       */

[Dan Beam, 2016/05/18 00:27:32]

/* These ...
^^
 * https://goo.gl/CCzijE */
                         ^^

[michaelpg, 2016/05/18 16:58:26]

Done.

+      paper-header-panel[main] paper-toolbar {
+        z-index: 2;
+      }
+
+      paper-header-panel[main] {
+        --paper-header-panel-shadow: {
+          z-index: 2;
+        };
+      }
+
+      /*
+       * The paper-drawer-panel implementation gives the drawer a stacking
+       * context, so its z-index should at least equal the main panel's.
+       */

[Dan Beam, 2016/05/18 00:27:32]

same formatting nit

[michaelpg, 2016/05/18 16:58:26]

Done.

+      paper-drawer-panel[narrow] {
+        --paper-drawer-panel-drawer-container: {
+          z-index: 2;
+        };
+      }
+
       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);
         };
       }
@@ skipping 55 matching lines @@
             </paper-input>
           </div>
         </paper-toolbar>
         <settings-main prefs="{{prefs}}" current-route="{{currentRoute}}">
         </settings-main>
       </paper-header-panel>
     </paper-drawer-panel>
   </template>
   <script src="settings_ui.js"></script>
 </dom-module>