JSFiddle - React, Tailwind, and code Playground

by cristian_cena

HTML

<div id="static">lorem ipsum  <!-- amarillo -->
    <div id="relativo">       <!-- verde -->
        <div id="absoluto">   <!-- azul -->     </div>
        <div id="fijo">       <!-- rojo-->      </div>
    </div>
</div>

CSS

*{
    margin:  0;
    padding: 0;
    outline: 1px solid black;
    opacity: 0.9;
}
#static {
    background: yellow;
    width:  300px;
    height: 300px;
}
#relativo {
    background: green;
    position: relative;
    top:    50px; 
    left:   50px;
    width:  100px;
    height: 100px;
    /* overflow:hidden; */
}
#absoluto {
    background: blue;
    position: absolute;
    top:    50px; 
    left:   50px;
    width:  100px;
    height: 100px;
}
#fijo {
    background: red;
    position: fixed;
    top:    50px; 
    right:   50px;
    width:  100px;
    height: 100px;
}