如何在core-header-panel中将paper-fab放在核心工具栏的接缝上，其中包含下面的内容

Question

是否有一种简单的方法可以将纸制品放在核心工具栏的接缝上，其下方的内容位于核心标题面板中？核心标题面板使用瀑布式高，因此可以改变高度。

这个想法是让它看起来像粉红色按钮，以及使粉红色按钮始终跟踪边缘。

Answer 1

如果工具栏很高，但由于用户向下滚动列表而缩小，我认为工厂必须随之移动。我能找到的最佳方法包括硬编码工具栏的2个可能高度，以及工具栏使用的过渡。

#core_toolbar {
  color: rgb(255, 255, 255);
  font-size: 1.2rem;
  font-weight: 400;
  background-color: rgb(33, 150, 243);

  #create_button {
    position: absolute;
    top: calc(64px - 28px);
    right: 24px;
    z-index: 1;
    transition: top 0.18s ease-in;
  }
}
#core_toolbar.tall {
  #create_button {
    position: absolute;
    top: calc(192px - 28px);
    right: 24px;
    z-index: 1;
    transition: top 0.18s ease-in;
  }
}

关于html没什么特别的：

<core-header-panel mode="waterfall-tall" id="core_header_panel">
  <core-toolbar id="core_toolbar" class="animate tall">
    <div></div>
    <paper-fab id="create_button" icon="add"></paper-fab>
  </core-toolbar>
  <section></section>
</core-header-panel>