MaterializeCSS 表单在导航栏上可见

Question

所以，我很高兴为我的新网站测试 MaterializeCSS。然后我明白了。

我的表单的视觉效果悬停在我的导航栏顶部。遗憾的是，这是一个我无法修复的问题，可能有一个简单而明显的修复方法......！但我自己太盲目了，看不到它。有人可以帮忙吗？

编辑：我知道我不善于解释问题，所以我希望一些视觉效果可能会有所帮助。

Answer 1

如果我对问题的理解正确，那么这是一个非常简单的解决方案。您不必删除固定位置，但必须补偿导航栏的高度。位置固定从流中删除元素，因此其他元素 "don't see it".

所以，基本上只需将上边距添加到您的页面容器并为其指定导航栏高度的值：

.pageContainer {
  margin-top: 64px;
}

请注意，您必须考虑不同的屏幕尺寸和导航栏的变化。

补充阅读可能会有帮助。

The (fixed) element is removed from the normal document flow, and no space is created for the element in the page layout. MDN - CSS/position

EDIT（经过进一步的交谈和澄清，我正在更新答案）：原始问题发生在滚动上。这是因为表单（或整个 pageContainer）的 z-index 高于 nav（栏）。我直接在 Mozilla Firefox 的开发工具中将 z-index: 2 添加到 nav 元素，它解决了这个问题。

MaterializeCSS 表单在导航栏上可见

MaterializeCSS form visible over navbar

html

css

materialize