Question

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

所以我想做的就是让landingMenu在后面，然后是landingMenuOrangeLine，然后是miniNavButton（所以按钮在前面）

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

有谁可以指出我做错了什么？我已经设置了codepen，以防你想玩它。

我的HTML：

z-index:auto

我的css：

<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>

Answer 1

简单

.landingMenu {
    position: relative;
    z-index: 1;
}
#landingMenuOrangeLine{z-index:0;}

Answer 2

我认为这是由你的样式/ HTML类名引起的。 .landingmenu应为.landingMenu。

请参阅此Are class names in CSS selectors case sensitive?

如果您想让.landingMenuOrangeLine跟随z-index，请将其放在.landingMenu内。

Answer 3

您有错字错误：.landingMenu而不是.landingmenu

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

修改

要使其具有所需的输出，您必须将.miniNavButton置于另外两个div的相同级别并将其置于相对位置。请参阅codepen已更新。

Codepen

Answer 4

尝试使用以下css替换..

./test.sh

jsFiddle链接https://jsfiddle.net/iqbalp95/3bekxmoj/1/

z-index未正确应用

4 个答案: