IE11 still comes back to bite me

Imagine my joy when for the first time I used Microsoft's Edge browser and it didn't break. I must admit that their references weren't that great - an ageing and defunct IE6 which started off as a decent browser, but out-stayed its welcome by a number of years and fastened the world of web development to the turn of the century. Then came the follow up of IE7. Was better in some ways, worse in others but still lagging far, far behind the rest of the pack. This pattern repeated itself until IE11 which still relied on a slow and obsolete stuffing. Edge was a breath of fresh air and dare I say it, a good browser - F12 tools aside - it's a good browser

I found a wonderful undocumented 'feature' in IE11 that had me stumped for a few hours. It doesn't exist in any other browser and had me flummoxed for a wee while.

It seems that IE11 allows you to put body content behind the html tag in the DOM stack. It's the only browser that does this as IE 9 and 10, Chrome (and Canary) Firefox and their Developer's edition - even Opera (not counting Safari as I was only interested in Windows browsers at the time) all behaved as expected. IE11 slapped the html tag above the content making it utterly unresponsive and as there were no errors, tricky to track down.

The issue boils down to the humble stylesheet z-index property. Now, as the body tag sits within the html tag and not along side it, the z-index should not affect it. Siblings yes, children no. In effect, it flipped the DOM back to front all because the body tag had an accidental z-index of -1

Once discovered it was obvious, but had me chasing my tail for a while.