Question

我创建了一个名为 toolbar 的角度组件，并将以下CSS应用于该组件。

position: fixed;
z-index: 999;
height: 100px;

每次滚动页面时，我都会使用位置将工具栏固定在页面上。我使用z-index在页面上所有其他元素上显示工具栏。

这弥补了我在app.component.html中使用的单个元素。

我的问题是，当使用新组件创建页面时，如果我导航到该页面，则“新组件有效！” 不会显示，因为工具栏重叠了它。

我希望通过以下方式固定工具栏：如果我有任何新元素，无论显示什么元素，它都会显示在工具栏的正下方，而不是在其下方。

感谢您的帮助！

Answer 1

position: sticky;正是您所需要的。

以下是一个示例（您需要指定位置，例如top: 0才能使position: sticky生效）

body, html {
  margin: 0;
  padding: 0;
}

.toolbar {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 999;
  height: 100px;
  width: 100%;
  background: red;
  opacity: 0.5;
}

.contents {
  height: 5000px;
}

<div class="toolbar">xyz</div>
<div class="contents">
  <div>contents</div>
</div>

如何防止组件重叠内容？

1 个答案: