输入元素重叠导航（搜索按钮和复选框）

Question

我目前遇到这个问题，复选框（标签）和搜索按钮（输入）等元素总是堆叠在我的导航上方。

我试着设置不透明度，位置，z-index（包括非静态位置），删除边框背景......但没有成功。

  opacity: 1;
  position: absolute;
  z-index: 9998;

Answer 1

请检查位置：亲属; CSS

Answer 2

.search input {
    border: 2px solid #ccc;
    border-radius: 20px;
    box-sizing: border-box;
    font-family: "FontAwesome";
    font-size: 16px;
    padding: 12px 20px;
    position: relative;
    transition: width 0.4s ease-in-out 0s;
    width: 100%;
    z-index: 9999;
}

Answer 3

对于那些像我一样运行同样问题的人。这是因为我的导航容器设置为position: static !!
我已将其更改为position: relative，现在它正常工作!!