CODEWITHSUNDEEP
html
Chetana Kestikar
Chetana Kestikar

Reputation: 570

a href tag not working due to z-index

I have a div with class 'header' that has the z-index value as 1. After that div, i have a div for logo in anchor tags. But the problem is i dont get any pointer cursor on 'logo'. If i remove the z-index of header i am able to click on it. I have .header as follows:

.header{
  z-index:1;
}

Here's the result i am getting:

Output i am getting...

Just take away the comments in css parts that i have given for z-index. You will be able to click the logo again.

Is there a way to get the anchor tags working with the z-index value as 1 on 'header'?

Upvotes: 2

Views: 9576

Answers (3)

Mike
Mike

Reputation: 1266

Just add pointer-events:none to the parent that's blocking the link from clicking (so to the header).

Here's your code updated: https://jsfiddle.net/pThNz/31/

.header {
    pointer-events:none
}

Upvotes: 4

Pete
Pete

Reputation: 58442

Why are you positioning things absolutely? If you want to make your code work you need to position your a tag relative or absolute and give it a higher z-index:

http://jsfiddle.net/pThNz/11/

a {position:relative; z-index:2;}

Otherwise you could try something like this for nicer code; stops you from getting into a z-index nightmare later down the road; and just stops empty divs being created everywhere:

http://jsfiddle.net/pThNz/10/

<div class="header">
  <a href="http://therepublik.ambibytes.com/" title="Home">
    <span class="leftCorners">
      <span class="rightCorners">
        <span class="text">The fuzzy Republik</span>
      </span>
    </span>
  </a>
</div>

CSS:

.header a {margin:20px; font-size: 20px; color: black; text-transform: uppercase; text-decoration:none; text-align:center; }
.header a,
.header span {display:block; width:283px; height:100px;}
.leftCorners {background:url(http://therepublik.ambibytes.com/wp-content/themes/republik/imgs/left_corners.gif) left top no-repeat;}
.rightCorners {background:url(http://therepublik.ambibytes.com/wp-content/themes/republik/imgs/right_corners.gif) right top no-repeat;}
.header .text {padding-top:45px; height:50px;}

Upvotes: 3

Jye Lewis
Jye Lewis

Reputation: 688

z-index does not affect elements that are not position:absolute, relative or static

.header{
  z-index:1;
  position:relative;
}

Upvotes: 1

Related Questions