JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

Non-Absolute Span After C:
<div>
    A<br>B<br>C <span>I'm not absolute</span>
    <br>X<br>Y<br>Z<br>
</div>

<br><br>
Absolute Span After C:
<div>
    A<br>B<br>C <span class="abs">I am absolute!</span>
    <br>X<br>Y<br>Z<br>
</div>
    
<br><br>
Non-Absolute Div After C:    
<div>
    A<br>B<br>C 
    <div>I am not absolute</div>
    <br>X<br>Y<br>Z<br>
</div>  
        
<br><br>
Non-Absolute Div After C:    
<div>
    A<br>B<br>C 
    <div class="abs">I am absolute</div>
    <br>X<br>Y<br>Z<br>
</div>

CSS

div {
    position:relative;
    padding: 10px;
    border: 1px solid #900;
}

div > span,
div > div {
    border: 1px solid #F00;
}
.abs {
    position: absolute;
}