JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<div class="parent">
    <!-- I'm a container, I need to expand in height, when my children expand, so they don't overlap elements beneath me. Sort of like clearing floats -->
    <div class="lower">
        <!-- I contain an image. My width is fixed, but my height may vary. -->
        <img src="http://placekitten.com/300/325" />
    </div>
    <div class="higher-container">
        <div style="top: 20px; left: 30px" class="higher-spot">foo</div>
        <div style="top: 80px; left: 50px" class="higher-spot">bar</div>
        <div style="top: 85px; left: 70px" class="higher-spot">baz</div>
    </div>
</div>
<div class="successor">
  Please keep me below all of this.
</div>

CSS

.parent {
    background-color: #ccffff;
    padding: 20px;
    position: relative;
}

.lower {
    position: relative;
    width: 300px;
    background-color: rgba(0,0,0,0.2);
    z-index: 0;
}

.higher-container {
    position: absolute;
    top:0px;
    left:0px;   
    z-index:1;
    background-color: rgba(255,0,0, 0.3);
}

.higher-spot {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: rgba(0, 255, 0, 0.5);
    z-index: 1px;
}

.successor {
    font-size: 18px;
    font-family: sans-serif;
}