Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

Relative ve Absolute - Tailwind


Doğuhan ELMA

94 views

1.png

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:

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...