Make Overlapping Div "Not Clickable" So That Content Below Can Be Accessed

Make overlapping div not clickable so that content below can be accessed?

Well there is pointer-events:none; but only few browsers modern browsers (and IE11) support it.

https://developer.mozilla.org/en/CSS/pointer-events

Overlapping div, creating unclickable links

Firstly, you're closing your #home as soon as you create it: <div id="home"></div>.

Secondly, I think all you need to do is override the position property of the navbar, which is relative. Assuming nav is child of #home, try the following:

#home > nav {
    position: inherit;
}

not clickable div with position:fixed

The solution is to add pointer-events: none; to the CSS of the overlaying div. This will cause any all events to pointer events to ignore the overlaying div.

This is demonstrated here: http://jsfiddle.net/nayish/7hHvL/.

You'll notice that the alert, which is set only for the bottom div, works also when clicking on the overlaying div.

Div overlapping another elements making it non clickable tailwindcss

please provide z-index to the nav bar to avoid this . since it has position fixed property

Overlapping div making links unclickable

z-index must work, but the nav and header div should be positioned in a non-static way.
position: relative should do the trick without breaking your design.
so you should make sure you have the following in your css:

#header{
  z-index: 5;
  postion:relative;/*or any other position except for static, depending on your design*/
}
#nav{
  z-index:6;
  postion:relative;/*or any other position except for static, depending on your design*/
}

Click on overlapping div using pointer-events and hide div

You only need one event listener on #outer, to hide the inner div when #outer has been clicked.

$('#outer').click(function (e) {    $('#inner').hide();});

#outer {    width:300px;     height:200px;     border:3px solid;     margin:auto;     background: green;
}#inner {  pointer-events: none;  position: absolute;   top: 150px;   left: 120px;  width: 100px;  height: 100px;  background: yellow;  border:3px solid;  margin:auto;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="outer">    <div id="inner">inner div</div>     Outer div</div>

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.

Underlying element not clickable

It's because you have a z-index: -1 on the green one which places it behind the body and html elements. Your event is probably being captured by the body. Try adding a wrapper and setting a z-index on it or applying z-index to the container.

.smaller-square {  width: 50px;  height: 50px;  background-color: yellow}
.bigger-square {  width: 100px;  height: 100px;  background-color: green}
.overlay {  z-index: 0;}
.underlay {  z-index: -1;  position: relative;  top: -5px;  left: 0px;}
.container {  position: relative;  z-index: 0;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/><div class="container">  <div class="row overlay">  <div class="smaller-square" onclick="alert('yellow');">  </div>  </div>  <div class="row underlay">  <div class="bigger-square" onclick="alert('green');">  </div>  </div></div>

---

Related Topics