Tailwind CSS position absolute position relative

index.html

<div class="flex h-screen">
  <div class="flex flex-col relative w-1/4 bg-slate-800 border-r border-gray-200">
    <button class="absolute -right-4 top-12 h-8 w-8 bg-slate-800 text-gray-50 rounded-full border border-gray-200 z-10"><</button>
  </div>
  <div class="relative w-3/4 overflow-y-scroll bg-zinc-800">
    <div class="absolute h-10 w-10 bg-yellow-500 flex items-center justify-center">1</div>
    <div class="absolute right-0 h-10 w-10 bg-yellow-500 flex items-center justify-center">2</div>
    <div class="absolute right-0 bottom-0 h-10 w-10 bg-yellow-500 flex items-center justify-center">3</div>
    <div class="absolute bottom-0 h-10 w-10 bg-yellow-500 flex items-center justify-center">4</div>
    <div class="absolute top-1/2 left-1/2 h-10 w-10 bg-red-500 flex items-center justify-center">5</div>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-10 w-10 bg-yellow-500 flex items-center justify-center">
    5
    <span class="absolute -right-1 -top-1 h-2 w-2 bg-blue-500 rounded-full"></span>
    </div>
  </div>
</div>