导航栏中标题阻止链接中的图像

Question

我在导航栏中间看到一个图像，该图像阻止了我的链接，在下面做了一些代码来显示该图像。 我尝试使用z-index修复此问题，但它一直阻止我的链接。
由于其余的代码（不在此代码段中），我无法将图像放置在导航栏中。 我想如果我得到<a>后面的绝对图像，就应该解决，但是我不能用z-index来完成

 $(document).ready(function () { $("nav a").click(function(event){ $("article").removeClass("slide_1"); $("article").removeClass("slide_2"); $("article").removeClass("slide_3"); var clickedId = event.target.id; $('article').addClass("slide_"+clickedId); }); }); 

 header { width: 100%; height: 100px; position: relative; background: #ffe7d9; } nav{ width: 100%; text-align: center; position: absolute; bottom: 0; border: 1px solid black; background-color: #fed5b7; } nav ul{ display: inline-block; margin: 0; width: 100%; padding: 0; } nav li{ width: 30%; text-align: center; box-sizing: border-box; display: inline-block; list-style-type: none; color: black; font-size: 1.1em; line-height: 35px; } nav li a{ width: 100%; height: 100%; display: block; color: black; cursor: pointer; } nav li a.no-background{ background-image: none !important; } img.headerlogo{ position: absolute; width: 15%; height: 200%; margin-left: auto; margin-right: auto; left: 0; right: 0; bottom: 0; } article{ width: 100%; height: 200px; } .slide_1{ background-color: red; } .slide_2{ background-color: green; } .slide_3{ background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <nav id="menu"> <img src="http://lorempixel.com/160/90" class="headerlogo"> <ul> <li><a id="1">Link1</a></li> <li class="logo"><a id="2">Link2</a></li> <li><a id="3">Link3</a></li> </ul> </nav> </header> <article> </article> 

Answer 1

用这个

nav{
        z-index:9;}
        img.headerlogo{
          z-index:-1;
    opacity:0.5;
        }

 $(document).ready(function () { $("nav a").click(function(event){ $("article").removeClass("slide_1"); $("article").removeClass("slide_2"); $("article").removeClass("slide_3"); var clickedId = event.target.id; $('article').addClass("slide_"+clickedId); }); }); 

 header { width: 100%; height: 100px; position: relative; background: #ffe7d9; } nav{ width: 100%; text-align: center; position: absolute; bottom: 0; border: 1px solid black; background-color: #fed5b7; z-index:9; } nav ul{ display: inline-block; margin: 0; width: 100%; padding: 0; } nav li{ width: 30%; text-align: center; box-sizing: border-box; display: inline-block; list-style-type: none; color: black; font-size: 1.1em; line-height: 35px; } nav li a{ width: 100%; height: 100%; display: block; color: black; cursor: pointer; } nav li a.no-background{ background-image: none !important; } img.headerlogo{ position: absolute; width: 15%; height: 200%; margin-left: auto; margin-right: auto; left: 0; right: 0; bottom: 0; z-index:-1; opacity:0.5; } article{ width: 100%; height: 200px; } .slide_1{ background-color: red; } .slide_2{ background-color: green; } .slide_3{ background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <nav id="menu"> <ul> <img src="http://lorempixel.com/160/90" class="headerlogo"> <li><a id="1">Link1</a></li> <li class="logo"><a id="2">Link2</a></li> <li><a id="3">Link3</a></li> </ul> </nav> </header> <article> </article> 

Answer 2

将img tage放在外面并为类headerlogo更改css

 $(document).ready(function () { $("nav a").click(function(event){ $("article").removeClass("slide_1"); $("article").removeClass("slide_2"); $("article").removeClass("slide_3"); var clickedId = event.target.id; $('article').addClass("slide_"+clickedId); }); }); 

 header { width: 100%; height: 100px; position: relative; background: #ffe7d9; } nav{ width: 100%; text-align: center; position: absolute; bottom: 0; border: 1px solid black; background-color: #fed5b7; } nav ul{ display: inline-block; margin: 0; width: 100%; padding: 0; } nav li{ width: 30%; text-align: center; box-sizing: border-box; display: inline-block; list-style-type: none; color: black; font-size: 1.1em; line-height: 35px; } nav li a{ width: 100%; height: 100%; display: block; color: black; cursor: pointer; } nav li a.no-background{ background-image: none !important; } img.headerlogo{ position: relative; width: 15%; height: 100%; margin-left: auto; margin-right: auto; left: 0; right: 0; bottom: 0; } article{ width: 100%; height: 200px; } .slide_1{ background-color: red; } .slide_2{ background-color: green; } .slide_3{ background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <nav id="menu"> <ul> <li><a id="1">Link1</a></li> <li class="logo"><a id="2">Link2</a></li> <li><a id="3">Link3</a></li> </ul> </nav> </header> <img src="http://lorempixel.com/160/90" class="headerlogo"> <article> </article> 

Answer 3

将z-index:-1赋予z-index: 1; 和z-index:1; position:relative; z-index:1; position:relative; nav 。

 $(document).ready(function () { $("nav a").click(function(event){ $("article").removeClass("slide_1"); $("article").removeClass("slide_2"); $("article").removeClass("slide_3"); var clickedId = event.target.id; $('article').addClass("slide_"+clickedId); }); }); 

 header { width: 100%; height: 100px; position: relative; background: #ffe7d9; } nav{ width: 100%; text-align: center; position: absolute; bottom: 0; border: 1px solid black; background-color: #fed5b7; z-index: 1; } nav ul{ display: inline-block; margin: 0; width: 100%; padding: 0; position: relative; } nav li{ width: 30%; text-align: center; box-sizing: border-box; display: inline-block; list-style-type: none; color: black; font-size: 1.1em; line-height: 35px; } nav li a{ width: 100%; height: 100%; display: block; color: black; cursor: pointer; } nav li a.no-background{ background-image: none !important; } img.headerlogo{ position: absolute; width: 15%; height: 200%; margin-left: auto; margin-right: auto; left: 0; right: 0; bottom: 0; z-index: -1; } article{ width: 100%; height: 200px; } .slide_1{ background-color: red; } .slide_2{ background-color: green; } .slide_3{ background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <nav id="menu"> <img src="http://lorempixel.com/160/90" class="headerlogo"> <ul> <li><a id="1">Link1</a></li> <li class="logo"><a id="2">Link2</a></li> <li><a id="3">Link3</a></li> </ul> </nav> </header> <article> </article>