<!DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <title>z-index should work correctly for elements with perspective</title> <style> #perspective { perspective: 300px; perspective-origin: top left; } #front { z-index: 2; width: 100px; height: 100px; background-color: #00FF00; transform: translateX(0px); } #back { z-index: 1; width: 100px; height: 100px; background-color: #FF0000; transform: translateY(-100px); } </style> <div id="perspective"> <div id="front"></div> <div id="back"></div> </div>