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

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS'de position özelliği ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

36 views

CSS'de position özelliği, bir öğenin belge içindeki konumlandırma yöntemini belirler. Bu özellik, öğeleri sayfa üzerinde istediğiniz yere yerleştirmek için kullanılır ve statik, göreceli, sabit, mutlak ve yapışkan olmak üzere beş ana değere sahiptir. Her bir değer, öğelerin konumlandırılma şeklini ve birbirleriyle nasıl etkileşime gireceğini değiştirir.

Position Değerleri

static: Bu, position özelliğinin varsayılan değeridir. Öğeler, normal akış içinde sıralı olarak konumlandırılır. top, right, bottom, left ve z-index özellikleri static konumlandırılmış öğelerde etkisizdir.

relative: Bir öğe position: relative; ile tanımlandığında, normal akışta olduğu konumuna göre konumlandırılır. top, right, bottom, ve left özellikleri öğeyi başlangıç noktasından itibaren belirli bir mesafe taşımak için kullanılabilir. Diğer öğeler bu taşınmadan etkilenmez ve öğenin orijinal aldığı yer boş bırakılmaz.

absolute: Bir öğe position: absolute; ile tanımlandığında, en yakın konumlandırılmış (positioned) ata öğesine göre konumlandırılır. Eğer böyle bir ata yoksa, öğe <html> öğesine göre konumlandırılır. Bu öğeler normal akışın dışına çıkar ve diğer öğeler üzerinde hiçbir alan kaplamaz.

fixed: position: fixed; ile tanımlanan bir öğe, görüntüleme alanına (viewport) göre konumlandırılır ve sayfa kaydırıldığında bile sabit kalır. Bu, örneğin, sabit üstbilgi veya "scroll to top" butonları için kullanışlıdır.

sticky: position: sticky; ile tanımlanan bir öğe, kullanıcının sayfayı belirli bir noktaya kadar kaydırmasıyla "sabit" hale gelir. Bu, belirli bir kaydırma pozisyonuna ulaşılana kadar öğenin normal akışta olduğu gibi davranmasını, ancak bu noktadan sonra sabit bir öğe gibi davranmasını sağlar. top, right, bottom, ve left özellikleri, öğenin "yapışkan" hale gelmeye başladığı konumu belirlemek için kullanılır.

Örnek Kullanımlar

.static-example {
  position: static;
}

.relative-example {
  position: relative;
  top: 10px;
  left: 20px;
}

.absolute-example {
  position: absolute;
  top: 0;
  right: 0;
}

.fixed-example {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

.sticky-example {
  position: sticky;
  top: 0;
}

position özelliği, özellikle karmaşık düzenler ve özel yerleşimler oluştururken web tasarımında vazgeçilmez bir araçtır. Kullanımı, öğelerin sayfadaki diğer içeriklerle nasıl etkileşime gireceğini ve görsel olarak nasıl yerleştirileceğini büyük ölçüde değiştirebilir.

 

TailwindCSS:

Position:

Class
Properties
static position: static;
fixed position: fixed;
absolute position: absolute;
relative position: relative;
sticky position: sticky;

 

1.png

1.png

1.png

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...