Here is what I know:
- In HTML, the root element of a document
<html> - The root element of the document creates a stacking context, therefore it
<html>is the root element of the first stacking context created in any HTML document.
From this, I expect that some element z-index: -1will be located behind <body>(although before <html>) in the document, in which there is no other stacking context. However, the following example demonstrates in all modern browsers: http://jsfiddle.net/39q2u/
In this second example, I dug a little deeper: http://jsfiddle.net/39q2u/1/
Adding background-colorto <html>somehow makes the rendering mechanism understand that the item z-index: -1really needs to be displayed behind <body>, which makes it invisible, since it <body>also has a background-colorset.
Interestingly, I tried several other CSS properties, none of them seem to have the same effect.
(The element remains visible in IE 9.)
Removing background-colorfrom <body>causes the item to z-index: -1appear again, proving that it was hidden behind <body>.
The problem I am facing is how to understand this behavior:
- Are there
<body>additional rules when it comes to stacking contexts? - What you need to install
background-coloron <html>for correct behavior mapping mechanism? - - -?