JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    main content.<br/>  My floater should<br/> overlay everything.
    
    <div class="floater">
        floater!
    </div>
    
</div>
<div class="footer">
    the footer
</div>

CSS

.floater {
    width:100px;
    padding:10px;
    background-color:#fff;
    border:1px solid #888;
    position:absolute;
    top:45px;
    left:220px;
    z-index:100;
}

.main {
    background-color:#eee;
    padding:10px;
    position:relative; /* since main and footer have position relative it causes IE7 to treat them with separate 'stacking contexts' */
}
.footer {
    background-color: #cac;
    padding:10px;
    position:relative; /* remove this to solve the problem OR add z-index:1; to .main */
}