Image in header blocking link in nav bar

Question

I got an image in the middle of my navbar which is blocking my link, I made a bit of code below to show that. I tried to fix this with z-index's but it keeps blocking my link.
I can't place the image in the nav bar itself because of the rest of my code (which is not in this snippet). I think it should be solved if I get the absolute image behind the <a> but I can't get that done with z-index's

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

use this

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

Put img tage outside and change css for class headerlogo

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

Give z-index:-1 to z-index: 1; and z-index:1; position:relative; z-index:1; position:relative; to 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>