[CSS] Z-index help

Peeeeeeeeeeynk · October 17, 2014

Hi I have a question about z-index because i am fairly new to the property.

Can I have 3 div's like this

</div>

My idea is can i make div 1 with the lowest hierarchy out of the three and div 2 and div 3 with the highest.

I was planning on putting a transparent gradient layer over the body but I want the content to not be affected by the gradient.

Is this possible?

Hazy125 · October 17, 2014

Hi I have a question about z-index because i am fairly new to the property.

Can I have 3 div's like this

<div class="div1">

<div class="div2">

<div class="div3">

</div>

</div>

</div>

My idea is can i make div 1 with the lowest hierarchy out of the three and div 2 and div 3 with the highest.

I was planning on putting a transparent gradient layer over the body but I want the content to not be affected by the gradient.

Is this possible?

There's a CSS property that no one knows about called pointer events. It controls what happens when a user clicks, hovers or basically does anything CSS related with the mouse. By setting pointer-events: none; on the overlay, it tells the computer to basically ignore any mouse stuff on the overlay. Here's my code stuff:

<head><style>.div1{	position: fixed;	z-index: -99;	width: 100%;	height: 100%;	top: 0;	left: 0;}.div2{	position: fixed;	z-index: 99;	width: 100%;	height: 100%;	top: 0;	left: 0;}.div3{	position: fixed;	z-index: 999;	width: 100%;	height: 100%;	pointer-events: none;	top: 0;	left: 0;	background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */}</style></head><body><div class="div1">          <div class="div2">	 <button>Click me</button><br>		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.         <div class="div3">			           </div>     </div></div></body>

And here is a fiddle showing it in action http://jsfiddle.net/49omtjfz/1/

I should warn, there is a reason it's not well known. As always, Internet Explorer just doesn't like it. There is a workaround, but you'll have to look it up because I can't remember it because all IE workarounds are horrendous. But it's not just IE. For example, I tried it in Chrome and it simply didn't work, worked in firefox through and it also works in the fiddle... So, I'd avoid it if I were you. You can probably do it with javascript... Getting the click and the mouse cursor position and simulating the click on the layer you want it to..... But that's probably more effort than it's worth