CSS position özelliği

Tanım ve Kullanım

position özelliği, elementin konumlandırma türünü belirler.

Açıklama

Bu özellik, elementin yerleşimini oluşturmak için kullanılan konumlandırma mekanizmini tanımlar. Herhangi bir element konumlandırılabilir, ancak absolut veya fixed elementler ne kadar element türünde olursa olsun bloklu bir çerçeve oluştururlar. Relatif konumlandırma elementleri, normal akımdaki normal konumlarına göre kaydırılır.

Daha fazla bilgi için:

CSS Eğitimi:CSS Konumlandırma

HTML DOM Referans Kılavuzu:position özelliği

Örnek

h2 elementini konumlandırma:

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

Kişisel olarak deneyin

CSS dilbilgisi

position: static|absolute|fixed|relative|sticky|initial|inherit;

Özellik değeri

Değer Tanım
absolute

Absolut konumlandırma oluşturulmuş elementler, static konumlandırma dışındaki ilk ebeveyn elemente göre konumlandırılır.

Elementin konumu "left", "top", "right" ve "bottom" özellikleri ile belirlenir.
fixed

Absolut konumlandırma oluşturulmuş elementler, tarayıcı penceresine göre konumlandırılır.

Elementin konumu "left", "top", "right" ve "bottom" özellikleri ile belirlenir.
relative

Relatif konumlandırma oluşturulmuş elementler, normal akımdaki normal konumlarına göre konumlandırılır.

Bu yüzden, "left:20" elementin SOL konumuna 20 piksel ekler.
static Varsayılan değer. Konumlandırma yoksa, element normal akımda görünür (top, bottom, left, right veya z-index ifadeleri göz ardı edilir).
inherit Position özelliğinin değeri, ebeveyn elementten alınmalıdır.

Teknik ayrıntılar

Varsayılan değer: static
Miras: hayır
Sürüm: CSS2
JavaScript dilbilgisi: object.style.position="absolute"

TIY Örneği

Konumlandırma: Relatif konumlandırma
Bu örnekte, bir elementin normal konumuna göre nasıl konumlandırıldığını gösterilir.
Konumlandırma: Absolut konumlandırma
Bu örnekte, elementin nasıl absolut değerlerle konumlandırıldığını gösterilir.
Konumlandırma: Sabit konumlandırma
Bu örnekte, elementin tarayıcı penceresine göre nasıl konumlandırıldığını gösterilir.
Elementin şeklini ayarlama
Bu örnekte, elementin şeklini nasıl ayarladığınız gösterilir. Bu element, bu şekle kesilmiş ve gösterilmiştir.
Z-index
Z-index, bir elementi diğer bir elementin ardından yerleştirmek için kullanılabilir.
Z-index
Yukarıdaki örnekteki elementin Z-index'i değiştirilmiştir.

Tarayıcı desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome IE / Edge Firefox Safari Opera
1.0 7.0 1.0 1.0 4.0