I am unable to click on button after giving z-index to it. It's overlapping on my side navigation bar I don't know why, any suggestions would be great:) . How can I make it clickable even after z-index=-1

MY CODE :

<div class="col-lg-1 col-lg-offset-0 col-xs-4"  >
  <span class="glyphicon glyphicon-heart" id="lovehate" style="left:17px; top:20px;" ></span>
  <a href="{{route('lovebutton',['username' => $user->username,'action'=>'love']) }}" > 
  <button  class="btn btn-md  btn-default  btn-lg-round waves-effect waves-teal" type="button" style="z-index: -1; "  id="lovebtn">Love</button>    
  </a>
</div>

I am unable to click on button after giving z-index to it. It's overlapping on my side navigation bar I don't know why, any suggestions would be great:) . How can I make it clickable even after z-index=-1

MY CODE :

<div class="col-lg-1 col-lg-offset-0 col-xs-4"  >
  <span class="glyphicon glyphicon-heart" id="lovehate" style="left:17px; top:20px;" ></span>
  <a href="{{route('lovebutton',['username' => $user->username,'action'=>'love']) }}" > 
  <button  class="btn btn-md  btn-default  btn-lg-round waves-effect waves-teal" type="button" style="z-index: -1; "  id="lovebtn">Love</button>    
  </a>
</div>

• javascript
• html
• css
• twitter-bootstrap
• laravel

• 1 When you give z-index = -1, your button must be hiding or going below another element, right? – Nitesh Commented Dec 24, 2016 at 12:02
• can you show a fiddle – Jishnu V S Commented Dec 24, 2016 at 12:04
• I think you have to give positive z-index or if navigation bar has z-index then you should give a value more than that – Saumini Navaratnam Commented Dec 24, 2016 at 12:05
• yes but after closing that element which hides the button . the button just shows me a simple cursor . i mean it's not clickable – Vish_TS Commented Dec 24, 2016 at 12:05
• we can understand the question, but not understand the situation – Jishnu V S Commented Dec 24, 2016 at 12:07

3 Answers 3

Since for those element that z-index value has not assigned, it's z-index value is auto. and for as long as you do not post more of your code we are not going to be able to help.

I tried your code you provided here: https://jsfiddle/cb16h3jo/ and the button is responsive.

You can inspect you button in your browser and see if any other element is overlaying in your element. If so then change that element z-index to something lower than your button z-indez says: z-index: -2

I guess you have a reason for setting the zindex to -1? is not that your button is not clickable, is that probably something is overlapping it (I've tried the piece of code you posted and I can click on the button).

you could use high values to bring the button to top layer... try

z-index=3 

or z-index=5 or z-index=9