HTML:

<div class="min-h-screen bg-blue-500 p-8">
    <div class="relative mx-auto bg-white rounded-xl shadow-xl h-56 w-80">
        <div class="absolute bg-amber-300 w-32 h-32 -top-2 -right-2"></div>
    </div>
</div>

Açıklama:

Tailwind CSS'de "absolute" ve "relative", CSS'de pozisyon belirleme için kullanılan iki yaygın değerdir. Bu değerler, öğelerin yerini ve yerleşimini belirlemede kullanılır. Tailwind CSS, bu pozisyon değerlerini hızlı bir şekilde uygulamanıza olanak tanıyan bir CSS framework'üdür.

absolute: Bir öğenin pozisyonunu, belirli bir üst öğe (genellikle bir üst div) içindeki belirli bir noktaya göre belirler. Yani, position: absolute; değeri, bir öğenin normal belgeli akıştan çıkmasını ve belirli bir üst öğeye göre konumlanmasını sağlar. Örneğin, bir overlay (üzerine örtü) veya bir modal pencere gibi öğeler, genellikle position: absolute; ile sabitlenir.

relative: Bir öğenin pozisyonunu, normal belgeli akışa göre belirler, ancak bu öğe üzerinde position: absolute; veya position: fixed; olan iç öğelerin konumunu belirler. Yani, position: relative; değeri, bir öğenin normal belgeli akışta kalmasını sağlar, ancak içindeki diğer öğelerin konumunu belirler.

Örneğin, bir elementin pozisyonunu Tailwind CSS ile belirlemek için aşağıdaki sınıfları kullanabilirsiniz: