Tailwind basic layout និង position

សិក្សាអំពី Positioning, Top left corner, Top right corner, Bottom left corner, Bottom right corner, Span top edge, Span left edge, Display classes, z-index និង float

Position absolute child

relative bg-emerald-100 w-1/2 h-12

absolute bottom-0 right-0

<div class="relative bg-emerald-100 w-1/2 h-14">
  <p>relative bg-emerald-100 w-1/2 h-12</p>
  <div class="absolute bottom-0 right-0 bg-pink-100">
    <p>absolute bottom-0 right-0</p>
  </div>
</div>

Top left corner

<div class="relative bg-gray-200 w-40 h-40">
    <div class="absolute bg-pink-200 w-16 h-16 top-0 left-0"></div>
</div>

Top right corner

<div class="relative bg-gray-200 w-40 h-40">
    <div class="absolute bg-pink-200 w-16 h-16 top-0 right-0"></div>
</div>

Bottom left corner

<div class="relative bg-gray-200 w-40 h-40">
    <div class="absolute bg-pink-200 w-16 h-16 bottom-0 left-0"></div>
</div>

Bottom right corner

<div class="relative bg-gray-200 w-40 h-40">
    <div class="absolute bg-pink-200 w-16 h-16 bottom-0 right-0"></div>
</div>

Span top edge

<div class="relative bg-blue-200 w-40 h-40">
    <div class="absolute bg-pink-200 h-16 top-0 inset-x-0"></div>
</div>

Span left edge,

<div class="relative bg-blue-200 w-40 h-40">
    <div class="absolute bg-pink-200 w-16 left-0 inset-y-0"></div>
</div>

Display classes

Hello study display classe span text-lg underline decoration and with other span bg-yellow-100 thanks you

<div>
    Hello study display classe <span class="text-lg underline decoration">span text-lg underline decoration</span>
    and with other <span class="bg-yellow-100">span bg-yellow-100</span> thanks you
</div>

z-index

z-20

z-10

z-30

<div class="relative bg-gray-200 w-40 h-40">
    <div class="bg-yellow-200 w-12 h-12 absolute right-7 z-20">z-20</div>
    <div class="bg-emerald-200 w-20 h-20 absolute left-5 z-10">z-10</div>
    <div class="bg-pink-300 w-10 h-10 absolute bottom-12 z-30">z-30</div>
  </div>

float

<div class="w-full">
    <img class="w-44 m-1 float-left" src="https://www.mrlinhadventure.com/UserFiles/image/Cambodia-highlights/Kep-highlights-and-travel-guide.jpg" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    
   </div>