Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<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>
&lt;div class="A"> A
  <b>&lt;div class="a"> a &lt;/div>       &lt;-- z-index: 100;</b>
&lt;/div>
&lt;div class="B"> B
  <b>&lt;div class="b"> b &lt;/div>       &lt;-- z-index: 1;</b>
&lt;/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

Dismiss x
public
Bin info
ptimpro
0viewers