css - 导航栏上的下拉菜单位于其他组件下方

Question

我正在使用 nuxt.js 并且我有一个固定的标题，我有一个用于更改语言的下拉菜单，但问题是当我单击下拉按钮时我为标题组件设置了一个高度，它只显示为那个高度你可以在这里找到问题的图像： https ://ufile.io/g7tosuph

我已经尝试将 position: absolute 设置为下拉项目和 9999 的 z-index 但没有运气，它仍然位于每个页面中的其他组件下方我还确保样式在 .vue 文件中的范围内

.header-whole {
  background-color: #0e1e25;
  position: fixed;
  overflow: hidden;
  height: 70px;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.lang-items {
  position: absolute;
  z-index: 9999;
  overflow: hidden;
}

标签： cssvue.jsdropdownnuxt.js

Answer 1

你能提供一些示例代码吗？

我猜你已经将你的<header>位置设置为“固定”，尝试将你的<header>z-index 设置为 z-index 值（大于<main>z-index 值，如果有的话）。