If you have trouble with your z-index using the transform property, you should try to set transform: translate3d(0,0,0) translateZ(1000px) on the element what should overlay the other element(s).
But be careful, this fucks up all your z-indexes, you have to add translateZ(xxxx) to all elements who should overlay your overlaying element. If you have some position: fixed elements inside your overlaying element, they will fail as well (you must move it outside any container on which you have applied the translateZ property).
Example:
// (Animated) element behind the page
.background-animation-element{
position:absolute;
left:50%;
top:100px;
z-index:1;
transform: perspective(200px) rotateX(26deg);
animation: whatever 1s;
// ...
}
// Page wrapper in front of the element
.page-wrapper{
// The part that should work in all major browsers - except safari:
position:relative;
z-index:50;
// The Safari fix:
transform: translate3d(0,0,0) translateZ(1000px);
}
- stackoverflow.com Kit Sunde
