How to handle Position in Tailwind CSS?

<div class="relative">Relative positioned</div>
<div class="absolute">Absolute positioned</div>
<div class="fixed">Fixed to viewport</div>
<div class="sticky top-0">Sticky at top</div>

<div class="absolute inset-0">Fill container</div>
<div class="absolute top-0 right-0">Top right corner</div>
<div class="absolute inset-x-0 bottom-0">Full width at bottom</div>

<div class="z-0">z-index: 0</div>
<div class="z-10">z-index: 10</div>
<div class="z-50">z-index: 50</div>
<div class="-z-10">z-index: -10</div>

<div class="fixed inset-0 z-50 flex items-center justify-center">
  <div class="absolute inset-0 bg-black/50"></div>
  <div class="relative bg-white p-6 rounded-lg">
    Modal content
  </div>
</div>