如何使用 AngularDart AppLayout 组件修复标题？

Question

基于Dart AppLayout Example，我想知道如何使标题固定（工具栏）没有内容覆盖标题。

为了固定标题，我使用了这个 CSS：

material-content material-drawer {
    position: fixed;
}

material-content header {
    position: fixed;
} 

但其他内容元素覆盖在标题上。请参阅图片，其中来自<material-list> 的<material-list-item> 位于标题上方。

修复标题的更好方法是什么？如何避免这种重叠？

Answer 1

我们使用 css 样式处理这个问题。将标头的z-index 设置为大于其兄弟元素的z-index。