Jump to content


Possible problem with z-index

Recommended Posts



I have made some rectangular images with transparent parts and set the z-index accordingly. The images are placed with absolute setting so that the positioning makes for easier responsiveness.


In addition, I have placed an icon on top of the first two images which begins either animation. Clicking on this icon executes the animation, clicking on it back executes one to revert to the original state. However, after reverting to the original, the icon is no longer clickable, the image's transparent part seems to take precedence. 


The jsfiddle is available here http://jsfiddle.net/Rijul_A/dq9jrsj0/


Help is really appreciated.



EDIT : Just noticed that clicking on the first icon and then reversing it works, but not on the second one, since the first image is not animated.

Clicking on the first, then reversing it, and then clicking on the second one also doesn't work. 


Tested on Chrome 39.0.2171.95 (64-bit) and Firefox 34.0

See the Pen by Rijul_A (@Rijul_A) on CodePen

Link to comment
Share on other sites

Personally for me, the result that came from the second icon click must be the default browsers behaviour because you have stacked 4 divs(.day) one over another.


Why you can click on the second icon for the first time?

Maybe when you doesn't have any z-index property for absolute/relative/fixed elems modern browsers is trying to show the triggerable elems on top on the 'neutral' ones.


Why you can't click on the second icon again?

When you click on the second icon, the animations add transform property to the latest 3 divs which imperatives tell the browser to handle the z-index (read the docs for more info - http://dev.w3.org/csswg/css-transforms/#transform-rendering).



If you check your example in older browsers I'm pretty sure that none of the icons would be clickable because the latest .day will stay alway on top.


How to fix it?

There are a lot of solutions but I would recommend you:

  1. to reset the z-index (set a z-index: 1; for example to all .day to prevent strange and unexpected behaviour)
  2. and move the icons outside of the divs. 

p.s. Sorry for my bad English

Link to comment
Share on other sites

Thanks, I used the second solution. Cheers!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.