Posted 7 months ago

Short URL

Notes

Help with CSS3 transforms messing up the z-index So, turns out applying CSS3 transforms on an element messes up the z-index assigned to elements. I am building this post-it-styled small navigation element for a client and the gray element you see in the image above should be under the post-it. If you comment out the transforms in the .topNav rule, you can see that the shadow goes under the post-it, as specified in the CSS. Uncomment the transforms and the z-index declarations are ignored. Please check out the jsFiddle and let me know if there is a workaround. P.S. I know the styling isn’t perfect. :)

Help with CSS3 transforms messing up the z-index

So, turns out applying CSS3 transforms on an element messes up the z-index assigned to elements. I am building this post-it-styled small navigation element for a client and the gray element you see in the image above should be under the post-it.

If you comment out the transforms in the .topNav rule, you can see that the shadow goes under the post-it, as specified in the CSS. Uncomment the transforms and the z-index declarations are ignored.

Please check out the jsFiddle and let me know if there is a workaround.

P.S. I know the styling isn’t perfect. :)

Tags