Click Link Below a Higher Z-Index Div

click link below a higher z-index div

The CSS method to do this is pointer-events: none

See: http://jsfiddle.net/LNwHV/1/

Browser support: http://caniuse.com/pointer-events (works everywhere except IE10 and older)

To support old versions of IE, you'll have to use JavaScript as a fallback.

How to allow clicking on <a> with z-index of -1

Here's an updated codepen working as you're expecting:

http://codepen.io/thecox/pen/xORdEe?editors=1100

When you use a z-index of -1, the element is placed below all elements, including its parent element. Updating to z-index: 0 and position: relative / z-index: 1 on the overlapping container corrects this. Only elements which are positioned work with the z-index property.

lower layer (z-index) with hyperlink becomes disabled when next layer is displayed (html)

Another layer (with transparent background) is covering it. There is no way you can click on the elements below, unless you are willing to try some JavaScript hack as described in this related question(s):

• Passing mouse clicks through an overlaying element <div>

div got z-index clickable while other cant click

Update

In this new situation z-index is needed.

• Assign the anchor inside the div#top an id or class (I assigned it #link1).

• Give that new id or class the following styles:

  #link1 {
    position: absolute;
    z-index: 1001;
    pointer-events: auto;
  }
  

Fiddle

Snippet

#top {  width: 150px;  height: 150px;  position: fixed;  z-index: 1000;  pointer-events: none;  background-color: rgba(255, 0, 0, .5);}#link1 {  position: absolute;  z-index: 1001;  pointer-events: auto;}

<div id="top">  <a id="link1" href="javascript:alert('click too')">ClickAble</a> </div><br/><br/><ul data-role="listview">  <li><a href="javascript:alert('click too')">ClickAble</a>  </li>  <li><a href="javascript:alert('click too')">ClickAble</a>  </li>  <li><a href="javascript:alert('click too')">ClickAble</a>  </li>  <li><a href="javascript:alert('click too')">ClickAble</a>  </li>  <li><a href="javascript:alert('click too')">ClickAble</a>  </li>  <li><a href="javascript:alert('click too')">ClickAble</a>  </li>  <li><a href="javascript:alert('click too')">ClickAble</a>  </li></ul>

Click on a lower z-index element

You have to use CSS pointer-events property. Just add to img styles:

pointer-events: none;

EDIT:
I'm sorry, I made a mistake, it has very good support! Can I use

Click through div to underlying elements

Yes, you CAN do this.

Using pointer-events: none along with CSS conditional statements for IE11 (does not work in IE10 or below), you can get a cross browser compatible solution for this problem.

Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks flow through to elements underneath.

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11 conditional:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

Here is a basic example page with all the code.

How to temporarily increase the z-index of a div onclick of a button?

Use an event listener and add a data attribute to it, ie the id of the div. Then use this to toggle the z-index.

Something like this should work, it toggles the clicked box z-index to 1 and should change the others to z-index -1. Its something for you to play around with but gives you the idea how the event handler works.

CSS

.a-bg {
  background-color: gray;
  width: 300px;
  height: 300px;
  z-index:-1;
}

.b-bg {
  background-color: red;
  width: 200px;
  height: 200px;
  z-index:0;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index:-1;
}

.c-bg {
  background-color: yellow;
  width: 100px;
  height: 100px;

  position: absolute;
  top: 100px;
  left: 100px;
  z-index:-1;
}

.show{
z-index:1;
}

HTML

<div class="a-bg" id="a-bg">A</div>
<div class="b-bg" id="b-bg">B</div>
<div class="c-bg" id="c-bg">C</div>

<div id="button" style="margin-top: 10px; margin-left: 100px;">
  <button class="a-btn" data-box="a-bg">A</button>
  <button class="b-btn" data-box="b-bg">B</button>
  <button class="c-btn" data-box="c-bg">C</button>
</div>

JS

$('#button button').click(function() { 
var box = $(this).attr('data-box');
$('#' + box).addClass('show').siblings().removeClass('show');
 alert(box); // Alerts the box id selected
})

How to allow clicking on elements behind elements with a higher z-index

You can use pointer-events: none, which works everywhere except IE10 and older.

A blog post with more information:

http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

Trigger click on lower element (z-index)

Check out this link:

Forwarding mouse events through layers

It deals with passing mouse events from one element to another using a littlwe known property of Javascript.

Another solution is also available here.

---

Related Topics