html - z-index 应用不正确

Question

我有一个由 SVG 图标组成的登陆菜单，现在我想在这些图标后面放置一个 div，但仍在菜单内。这两个元素都有 position:fixed 和 top 设置为百分比。

所以我想做的是在后面有 landingMenu，然后是 landingMenuOrangeLine，然后是 miniNavButton(所以按钮在前面)

我想做的是设置相关元素的 z-index 以使按钮出现在 div 的前面。现在发生的是我将 .miniNavButton 的 z-index 设置为 2，但是当我检查开发人员工具中的元素时，它显示 z-index:自动。

谁能指出我做错了什么？我设置了一个 codepen如果你想玩它。

我的 html:

<div class="landingMenu">
    <div id="introductionButton" class="miniNavButton" (click)="changeState('landing')">
        <a>
            <svg class="icon icon-user">
                <use xlink:href="symbol-defs.svg#icon-user"></use>
            </svg>
        </a>
    </div>
    <div id="skillsButton" class="miniNavButton" (click)="changeState('skills')">
        <a>
            <svg class="icon icon-book">
                <use xlink:href="symbol-defs.svg#icon-book"></use>
            </svg>
        </a>
    </div>
    <div id="contactButton" class="miniNavButton" (click)="changeState('contact')">
        <a>
            <svg class="icon icon-envelop">
                <use xlink:href="symbol-defs.svg#icon-envelop"></use>
            </svg>
        </a>
    </div> 
</div>

<div id="landingMenuOrangeLine"></div>

我的CSS:

.landingMenu {
  top: 1%;
  position: fixed;
  width: 100%;
  border-top: 0.1em solid white;
  border-bottom: 0.1em solid white;
  padding: 0.5em;
  background-color: #00B16A;
}

#landingMenuOrangeLine {
  width: 100%;
  height: 0.3em;
  background-color: #FF4C00;
  position: fixed;
  top: 5%;
  z-index: 1;
}

.miniNavButton {
  background-color: #4DC594;
  padding: 1em;
  margin: 0 7.5%;
  border-radius: 50%;
  display: inline-block;
  z-index: 2;
}

.icon-user,
.icon-book,
.icon-envelop,
.icon-eye,
.icon-embed,
.icon-hammer {
  width: 2em;
  height: 2em;
}

.contactLink {
  display: none;
}

Answer 1

您有一个拼写错误:它是 .landingMenu 而不是 .landingmenu

您还可以使用它的 z-index 属性，使其出现在橙色线的前面或后面。

编辑

要使其具有所需的输出，您必须将 .miniNavButton 放在与其他两个 div 相同的级别并将其放在相对位置。请参阅已更新的代码笔。

Codepen