如何使用 AngularDart AppLayout 组件修复 header？

Question

基于 Dart AppLayout Example，我想知道如何使 header 固定（工具栏）而不覆盖 header。

为了修复 header，我使用了这个 CSS:

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

material-content header {
    position: fixed;
} 

但其他内容元素覆盖在 header 上。查看图像，其中 <material-list> 中的 <material-list-item> 在 header 上方。

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

Answer 1

我们用 css 样式来处理这个问题。将 header 的 z-index 设置为大于它的同级元素。