JSFiddle - React, Tailwind, and code Playground

by skeller88

HTML

<div id="reldiv1">
   <br /><span class="bold">reldiv1</span>
   <br />position: relative;
</div>

<div id="absdiv1">
   <br /><span class="bold">absdiv1</span>
   <br />position: absolute;
</div>



<!--
<div id="reldiv2">
   <br /><span class="bold">reldiv2</span>
   <br />position: relative;
</div>

<div id="absdiv2">
   <br /><span class="bold">absdiv2</span>
   <br />position: absolute;
</div>

<div id="normdiv">
   <br /><span class="bold">normdiv</span>
   <br />no positioning
</div>

-->

CSS

#normdiv {
   height: 70px;
   border: 1px dashed #999966;
   background-color: #ffffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#reldiv1 {
   opacity: 0.7;
   height: 100px;
   position: relative;
   top: 30px;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#reldiv2 {
   opacity: 0.7;
   height: 100px;
   position: relative;
   top: 15px;
   left: 20px;
   border: 1px dashed #669966;
   background-color: #ccffcc;
   margin: 0px 50px 0px 50px;
   text-align: center;
}

#absdiv1 {
   opacity: 0.7;
   position: absolute;
   width: 150px;
   height: 350px;
   top: 10px;
   left: 10px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}

#absdiv2 {
   opacity: 0.7;
   position: absolute;
   width: 150px;
   height: 350px;
   top: 10px;
   right: 10px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}