如何防止我的 position:fixed 导航栏出现在其他元素下方？

Question

我在 css 级别遇到问题，因为我正在通过此站点测试代码： https://codepen.io/steveeeie/pen/NVWMEM。它工作得很好，但在我的 navbar 级别，当我滚动时它会在上面而不是下面。

我注意到这是因为 position: absolute 但我正在尝试更改它，但它使我的导航栏在滚动时根本无法固定在顶部。

提前感谢您的帮助:)

Answer 1

你所说的 CSS level 实际上称为元素的 z-index。
你可以在这里阅读它：z-index on MDN.

来自 MDN：

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

要点是，因为您的导航栏（大概）在您的标记中位于这些卡片之前，所以它将显示在卡片下方。为了解决这个问题，将导航栏上的 z-index 设置为高于卡片的值。像这样：

.navbar {
  /* [your other styles for your navbar] */

  z-index: 1000;
}

如何防止我的 position:fixed 导航栏出现在其他元素下方？

How to keep my position:fixed navbar from appearing underneath other elements?

html

css

z-index