JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<div class="relative">
    <div class="relative">1b</div>
</div>
<div class="absolute">
    <div class="relative">2b</div>
</div>
<div class="relative">
    <div class="absolute">3b</div>
</div>
<div class="fixed">4</div>
<div class="relative">5</div>
<div class="absolute">
    <div class="fixed">regardless of its parent position it fixed will always refer to window</div>
</div>

CSS

div {
    width:50px;
    height:30px;
    padding:10px;
    border: 1px solid black;
    margin: 5px;
}
div>div {
    width:30px;
    height:10px;
}
.absolute, .relative, .fixed {
    top: 5px;
    left: 5px;
}
.relative {
    position:relative;
    background: lightblue;
}
.absolute {
    position:absolute;
    left: 240px;
    border-style:dashed;
}
.fixed {
    position:fixed;
    left: 140px;
    border-style: dotted;
}
body {
    background-color: lightgrey;
    padding:0;
    margin:0;
}
.absolute .fixed {
    top:300px;
}

JavaScript

/******

relative will just position the element with an offset from the normal position. Basically it will first place the element as if had no positioning (static) then offset from its position with top, left, bottom, right

*******/