JSFiddle - React, Tailwind, and code Playground

by ryanwheale

HTML

<div class="z-index-100">This will always be on top</div>
<div class="z-index-5">
  <div class="z-index-200">this will always be underneath.</div>
</div>


<div class="z-index-100">This should now be underneath.</div>
<div class="DO-NOT-POSITION-ME">
  <div class="z-index-200">This should now be on top.</div>
</div>

CSS

div {
    position: relative;
    height: 5em;
    width: 30em;
}
.z-index-5 {
    z-index: 5;
}
.z-index-100 {
    z-index: 100;
    background: red;
}
.z-index-200 {
    z-index: 200;
    top: -2.5em;
    left: 2.5em;
    background: green;
}
.DO-NOT-POSITION-ME {
    /* This is only necessary for IE7 to work properly */
    position: static;
}