css - 在页眉左侧实现一个 FAB 按钮并在其下方悬挂部分

Question

尝试在 MDL 中的标题左侧实现一个添加按钮。

可以在此处的 getmdl.io 网站上看到示例 https://getmdl.io/templates/text-only/index.html

我定义了以下 header 。

    <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

将以下 CSS 添加到链接到页面的样式表中

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

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

然后在按钮上添加下面的类

add-button