Question

我正在尝试修复我网站的导航栏。我的设置几乎完全符合我的要求，但我希望我的徽标位于栏前。当我通过使navbar z-index = -1将它移到前面时，我的链接不再有效。

关于我如何做到这一点的任何想法？

    <body>

<header>

    <img src="Images/logo.png" height="50" width="50"/>

    <div class="mainnav">

    <nav>
        <ul>
            <li> <a href="#">Home</a></li>
            <li> <a href="#">Write for Lakers Pulse</a></li>
            <li> <a href="#">Lakers Salaries</a></li>
            <li> <a href="#">Contact Us!</a></li>
            <li> <a href="#">Donate</a></li>
        </ul>
    </nav>
    </header>

CSS

    nav a  {
text-decoration: none;
color: #fff;
font-size: 110%;
}

    li {
text-decoration:none;
display:inline-block;
margin: 8% 4% -1% 4%;
padding: 1%;
}

.mainnav {
background: #4A2583;
text-align: center;
position: fixed;
top: 0;
left: 0;
right: 0;
opacity: 0.6;
z-index: 1;
margin: -10%;
}

a:hover {
color: #F5AF1B;
}

a:active {
color:blue;
}

img {
padding-left:10px;
z-index: 5;

}

Answer 1

将pointer-events: none;添加到img css。这会阻止元素捕获它的任何点击，而只是让事件落到它下面的元素，从而允许你的链接工作。

如何获得前面的徽标

1 个答案: