CodePen

HTML

            
              <html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>z-index demo</title>
</head>
<body>
	
<div class="one">one
  <a href="http://css-tricks.com"><div class="two">two</div></a>
  <div class="three">three</div>
</div>
<div class="four avoid-clicks">four</div>

  
</body>
</html>
            
          
!

CSS

            
              html {
  background: #4e80c4;
}

div {
  width: 200px;
  height: 200px;
  padding: 20px;
}
 
.one, .two, .three, .four {
  position: absolute;
  opacity: 0.9;
}
  
.one {
  background: #f00;
  outline: 5px solid #000;
  top: 100px;
  left: 200px;
  z-index: 10;
  text-align: center;
}
  
.two {
  background: #0f0;
  outline: 5px solid #000;
  top: 50px;
  left: 75px;
  z-index: 100;
  text-align: center;
}
 
.three {
  background: #0ff;
  outline: 5px solid #000;
  top: 125px;
  left: 25px;
  z-index: 150;
  text-align: center;
}
 
.four {
  background: #00f;
  outline: 5px solid #ff0;
  top: 200px;
  left: 350px;
  z-index: 50;
  text-align: center;
}

.avoid-clicks {
  pointer-events: none;
}



            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              (function($){
  $('.two').on('click', function(){
    alert("You clicked div .two, now let's redirect you to Chris's site");
  });
  
})(jQuery);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................