CodePen

HTML

            
              <h1>Element Stacking Tests</h1>
<div class="container">
  <h2>Block, Block</h2>
  <div class="stack upper">I am block... I am block... I am block... I am block...</div>
  <div class="stack lower">I am block... I am block... I am block... I am block...</div>
</div>
<div class="container">
  <h2>Inline, Block</h2>
  <div class="stack upper inline">I am inline... I am inline... I am inline... I am inline...</div>
  <div class="stack lower">I am block... I am block... I am block... I am block...</div>
</div>
<div class="container">
  <h2>Block, Inline</h2>
  <div class="stack upper">I am block... I am block... I am block... I am block...</div>
  <div class="stack lower inline">I am inline... I am inline... I am inline... I am inline...</div>
</div>
<div class="container">
  <p>
    First box demonstrates stack order of block element over block element. Lower (blue) div overlays the upper (red) div. Children<sup>1</sup> of lower div overlay children of upper div.
  </p>
  <p>
    Second box demonstrates stack order of inline element over block element. Upper (red) div is inline-block, and overlays lower (blue) div. Children of lower div overlay children of upper div.
  </p>
  <p>
    Third box demonstrates stack order of block element over inline element. Lower (blue) div is inline-block, and overlays upper (red) div. Children of lower div overlay children of upper div.
  </p>
  <p>
    <dfn><sup>1.</sup> Text is <strong>child</strong> of divs</dfn>
  </p>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .stack {
  width:100px;
  height:100px;
  padding:5px;
  font:bold 1.2em calibri,sans-serif;
  color:#FFF;
  text-shadow:0 2px 2px #000,0 -2px 2px #000,2px 0 2px #000,-2px 0 2px #000;
}
.upper {
  background:rgba(255,0,0,0.6);
  border:5px solid #900;
}
.inline {
  display:inline-block;
}
.lower {
  background:rgba(0,0,255,0.6);
  border:5px solid #009;
  margin:-50px 0 0 50px;
}

/* --------------------------------- */

body {
  margin:0;
  font:15px calibri,sans-serif;
}

p {
  text-indent:2em;
  font:1em/1.5 calibri,sans-serif;
  border-bottom:3px double #B0B0B0;
  margin:0;
  padding:5px;
}

p:last-of-type {
  border-bottom:none;
}

h1 {
  background:#404040;
  color:#FFF;
  margin:0;
  padding:10px;
}

h2 {
  margin:5px;
  text-align:center;
  border-bottom:3px double #B0B0B0;
}

.container {
  float:left;
  max-width:40%;
  margin:10px;
  padding:5px;
  border:1px solid #B0B0B0;
  background:#D0D0D0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................