JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="a">
    <div id="navi">a</div>
    <div id="infoi">
        <img src="info_icon2.png" height="20" width="32" />b</div>
</div>
<div id="container" class="b">
    <div id="navi">a</div>
    <div id="infoi">
        <img src="info_icon2.png" height="20" width="32" />b</div>
</div>
<div id="container" class="c">
    <div id="navi">a</div>
    <div id="infoi">
        <img src="info_icon2.png" height="20" width="32" />b</div>
</div>

CSS

#container {
    width: 100px;
    height: 100px;
    margin:20px;
    background-color:#333;
}
#navi, #infoi {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 3px;
    left: 3px;
}
#infoi {
    z-index: 10;
    background-color:#fe5;
}
#container.a {
    top:90px;
    position:relative;
}
#container.b {
    top:190px;
    position:absolute;
}
#container.c {
    top:280px;
    position:fixed;
}