<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8" />
<title>CSS: Stacking Context</title>
<meta name="description" content="CSS: Stacking Context" />
</head>
<body>
<h1>Stacking Context</h1>
<p><em>Demonstrating that an element with a higher z-index (the pink square <code>.a</code> with <code>z-index: 100;</code>) can't appear over the top of elements in a higher stacking context.</em></p>
<p>
In response to:
<a href="http://stackoverflow.com/questions/19796687/can-someone-explain-stacking-contexts?rq=1">can-someone-explain-stacking-contexts</a>.
</p>
<p>
Read more at: <a href="http://philipwalton.com/articles/what-no-one-told-you-about-z-index/">what-no-one-told-you-about-z-index</a>
and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">MDN</a>.
</p>
<pre><code>
<div class="A"> A
<b><div class="a"> a </div> <-- z-index: 100;</b>
</div>
<div class="B"> B
<b><div class="b"> b </div> <-- z-index: 1;</b>
</div>
</code></pre>
<p>If a z-index is not specified on the parent divs, then the natural stacking order will dictate that <code>.B</code> is above <code>.A</code>.</p>
<p>If we create a <strong>stacking context</strong> on <code>.A</code>, then it's children will never appear above the stacking order of <code>.A</code>.</p>
<p>In the diagram below, the number before the period indicates the stacking order of the element's context, and the number after the period indicates the stacking order of the child.</p>
<p>Although the pink div has a z-index of 100, the highest in the document, <code>2.x</code> is shown to be higher than <code>1.x</code>.</p>
<p>See the CSS for annotations.</p>
<div class="A">
A: 1
<div class="a">a: 1.100</div>
</div>
<div class="B">
B: 2
<div class="b">b: 2.1</div>
</div>
</body>
</html>
div {
width: 200px;
height: 200px;
padding: 1rem;
}
.A {
position: absolute;
background-color: red;
/*
Adding a transform here creates a
new stacking context for the children of .A
*/
transform: translateX(0);
/*
several other properties can trigger creation of stacking context,
including: opacity less than 1 and others:
*/
/* opacity: 0.99; */
/*
If we raise .A above .B, the children will rise up with it;
uncomment the following to see:
*/
/* z-index: 3; */
}
.a {
position: relative;
/*
even a much higher z-index can't lift .a above .b when
it is constrained to a lower stacking context
*/
z-index: 100;
margin-left: 125px;
background-color: pink;
}
.B {
position: absolute;
/* z-index: 2; */
background-color: blue;
margin-top: 75px;
}
.b {
margin-left: 50px;
background-color: lightblue;
/*
The following is not necessary: if a z-index is not specified,
then it is calculated according to the rules of
natural stacking order...
I'm just specifying it explicitly for editorial effect.
*/
z-index: 1;
}
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |