我有一个由 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;
}
最佳答案
您有一个拼写错误:它是 .landingMenu
而不是 .landingmenu
您还可以使用它的 z-index
属性,使其出现在橙色线的前面或后面。
编辑
要使其具有所需的输出,您必须将 .miniNavButton
放在与其他两个 div 相同的级别并将其放在相对位置。请参阅已更新的代码笔。
关于html - z-index 应用不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36736685/