ヘッダーの左側にFABボタンを実装し、その下に部品を掛ける

Question

MDLのヘッダーの左側に[追加]ボタンを実装しようとしています。

例は、私が定義された以下のヘッダを持ってここにgetmdl.ioサイト上https://getmdl.io/templates/text-only/index.html

を見ることができます。

<header class="mdl-layout__header"> 
     <div class="mdl-layout__header-row"> 
      <span class="mdl-layout-title">Task Manager</span> 
      <div class="mdl-layout-spacer"></div> 
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> 
       <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable"> 
        <i class="material-icons">search</i> 
       </label> 
       <div class="mdl-textfield__expandable-holder"> 
        <input class="mdl-textfield__input" type="text" id="search-expandable" /> 
        <label class="mdl-textfield__label" for="search-expandable">Search text</label> 
       </div> 
      </div> 
     </div> 
     <div class="mdl-layout-spacer"></div> 
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent mdl-button--mini-fab mdl-badge--overlap" id="add"> 
      <i class="material-icons" role="presentation">add</i> 
      <span class="visuallyhidden">Add</span> 
     </button> 
    </header> 

このプロジェクトではタブは必要ありませんが、リンクされた例のようにヘッダーの下の部分を削除するように見えることはありません。

Answer 1

は

.mdl-layout__header 
{ 
    position: relative; 
    overflow:visible; 
} 

.add-button{ 
    position: absolute; 
    right: 10px; 
    bottom: -25px; 
} 

が続いボタン

add-button 

に次のクラスを追加するページにリンクされたスタイルシートに次のCSSを追加します。