JSFiddle - React, Tailwind, and code Playground

HTML

<!-- relative positioning example -->
<!-- blog.kevichisholm.com -->

<div>I'm static</div>
<div class="rel right">I'm relative, offset 10px from the right</div>
<div class="rel left">I'm relative, offset 10px from the left</div>
<div class="rel right negative">I'm relative, offset -10px from the right</div>
<div class="rel left negative">I'm relative, offset -10px from the left</div>
<div class="rel upAndOver">I've been nudged up and over</div>
<div>I'm static</div>

CSS

div{width:150px;margin:10px auto 0;background-color:yellow;}

.rel{position:relative;background-color:pink;}

.right{right: 10px;}

.left{left: 10px;}

.right.negative{right: -50px;}

.left.negative{left: -50px;}

.upAndOver{top:-25px;right: -25px;color:white;background-color:red;}

.negative{border:4px solid black;}