Recently, when I was discovering the development bar in Hotwire, I saw that the << div>> executing the development bar was infused right into the DOM (File Things Version) after the << head>> tag and also prior to the << body>> tag. I really did not recognize that it was feasible to make aspects beyond the Body tag. And also, as a matter of fact, statically made aspects beyond the Body will certainly be “relocated” right into the Body (by the internet browser) as the HTML is analyzed. Nevertheless, it ends up that you can make aspects in between the Head and also Body tags at runtime utilizing JavaScript.
Run this trial in my JavaScript Demos job on GitHub
Sight this code in my JavaScript Demos job on GitHub
I presume that the Hotwire structure is making this selection due to the fact that it swaps out the whole << body>> tag when a brand-new web page is filled. Therefore, any kind of aspects included within the << body>> tag will certainly be unconditionally gotten rid of. Which methods, if the development bar is outside the Body tag, the development bar can be lingered also as the Body tag is being changed.
That’s a great use-case; however, when I saw this, my instant ideas mosted likely to piling context Piling context is the secret to understanding z-index layering If you have actually ever before seen a programmer utilizing a CSS residential property like:
z-index: 999999999;
… it’s due to the fact that they do not comprehend exactly how z-index functions; and also, they’re simply tossing numbers at the wall surface to see what sticks. It’s an useless effort to damage without a “piling context” that is locking-down layering within a branch of the DOM.
The major made branch of the DOM is the << body>> aspect. Which methods, if we can produce a “piling context” on the Body tag itself, anything beyond the Body, will certainly remain in a various piling context and also can openly pile over or listed below the Body layer.
To show this, I have actually produced a web page with 2 << div>> aspects utilizing z-index: 2 They are both specified in between the Head and also Body tags; nonetheless, among them is dynamically infusing itself after the << head>> utilizing JavaScript:
<.
<< html lang=" en">
<> < head>>.
<< meta charset=" utf-8"/>>.
<< meta name=" viewport" web content=" size= device-width, initial-scale= 1"/>>.
<< web link rel=" stylesheet" kind=" text/css" href=" http://www.cfnote.com/./demo.css"/>>.
<< design kind=" text/css">
>/ **.
* Developing a PILING CONTEXT around the body.
*/.
body {
setting: family member;
z-index: 0;
}
/ **.
* Developing a CONTROL things for layering. Making use of a z-index of "999999", which is.
* more than the various other 2 aspects (listed below). Nevertheless, the piling context on the.
* BODY aspect adjustments exactly how points are aesthetically piled.
*/
. box {
setting: repaired;
z-index: 999999;/ * << --------- HIGH z-index worth. */.
}
. fixed {
boundary: 2px strong blue;
setting: repaired;
z-index: 2;/ * << --------- LOWER (than BOX) z-index worth. */.
}
. vibrant {
boundary: 2px strong hotpink;.
setting: repaired;.
z-index: 2;/ * << --------- LOWER (than BOX) z-index worth. */.
}
<.
<.
<
