z-index fixes are sometimes easier than you think
I ran into the dreaded IE7/IE6 z-index rendering bug today. I knew it was going to show its ugly head once I began troubleshooting the UI component I was working on, but little did I expect it to slide itself behind nearly every element it was supposed to cover! I contemplated a jQuery solution but the thought of targeting so many different elements made my head spin.
I started running the causes through my head; position is relative, IE 7, target layer opens below event element…and then it hit me! Simply position the layer above the event triggering element! It worked because everything above the relative container was rendered before it in the source html. It was like manually reversing the z-index with jQuery except, since it was going in reverse, the browser had stacked the items correctly! Luckily the component I was working on had both the space and design to accomodate such a solution.
Leave a Reply