html - 如何防止组件内容重叠？

Question

我创建了一个名为 的 Angular 组件工具栏 并将以下 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>