CSS Düzen - position Özelliği

position Özellik tanımı, elementin konum yöntemlerinin türüne (static, relative, fixed, absolute veya sticky) uygulanır.

position özniteliği

position öznitelik, elemente uygulanacak konumlandırma yönteminin türünü belirler.

Beş farklı konum değeri vardır:

  • static
  • bağımlı
  • sabit
  • absolute
  • sticky

elementler aslında top, bottom, left ve right özellikleri ile konumlandırılır. Ancak, position özelliği önceden ayarlanmadıkça bu özellikler etkili olmaz. Farklı position değerlerine göre çalışma şekilleri de farklıdır.

position: static;

HTML elementlerinin varsayılan konumlandırma türü static (sabit)’tür.

Sabit konumlandırma elementleri, top, bottom, left ve right özelliklerinden etkilenmez.

position: static; elementleri, herhangi bir özel şekilde konumlandırılmaz; her zaman sayfanın normal akışına göre konumlandırılır:

Bu <div> elementi position: static; ayarlanmıştır;

Bu CSS kullanılıyor:

Örnek

div.static {
  position: static;
  yükseklik: 100px;
}

Kendiniz deneyin

position: relative;

position: relative; elementleri, normal konumlarına göre konumlandırılır.

Relatif konumlandırma elementlerinin top, right, bottom ve left özelliklerini ayarlamak, onların normal konumundan sapmalarına neden olur. Bu, elementin bıraktığı herhangi bir alanı uyumlandırmak için diğer içeriklere ayarlanmaz.

Bu <div> elementi position: relative; ayarlanmıştır;

Bu CSS kullanılıyor:

Örnek

div.relative {
  position: relative;
  left: 30px;
  yükseklik: 100px;
}

Kendiniz deneyin

position: fixed;

position: fixed; elementleri viewport'a göre konumlandırılır, bu da sayfanın kayarken bile her zaman aynı konumda kalması anlamına gelir. Bu elementi konumlandırmak için top, right, bottom ve left özellikleri kullanılır.

Sabit konumlandırma elementleri, genellikle yerleştirilmesi gereken sayfa yerlerinde boşluk bırakmaz.

Sayfanın sağ alt köşesindeki bu sabit elemente dikkat edin. Bu CSS kullanılıyor:

Örnek

div.fixed {
  position: fixed;
  bottom: 0;
  top: 80px;
  width: 300px;
  yükseklik: 100px;
}

Kendiniz deneyin

Bu <div> elementi position: fixed; ayarlanmıştır;

position: absolute;

position: absolute; elementleri, en yakın konumlandırılmış ata elementine göre konumlandırılır (fixed gibi viewport'a göre değil).

Ancak, mutlak konumlandırma elementi bir ata elementi yoksa, belge başlığı (body) kullanır ve sayfa kayarken birlikte hareket eder.

Dikkat:“Konumlandırılmış” elementler, konumlarınıın static dışındaki herhangi bir element.

Bu basit bir örnek:

Bu <div> elementi position: relative; ayarlanmıştır;
Bu <div> elementi position: absolute; ayarlanmıştır;

Bu CSS kullanılıyor:

Örnek

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  yükseklik: 100px;
} 
yükseklik: 200px;
  position: absolute;
  div.absolute {
  top: 80px;
  sağ: 0;
  genişlik: 200px;
  yükseklik: 100px;
}

Kendiniz deneyin

position: sticky;

position: sticky; çerçeve: 3px dolgu #73AD21;

sabit elementler, kullanıcıya göre kayan konumlarına göre konumlandırılır.bağımlı) ve sabit (sabit) arasında geçiş yapar. Başlangıçta, görsel konumlandırılmış olacak, görselde belirtilen kayan konuma kadar - ardından uygun konuma ' yapıştırılır (örneğin, position:fixed).

Dikkat:Internet Explorer, Edge 15 ve daha eski sürümler, yapışkan konumlandırmayı desteklememektedir. Safari, -webkit- öneki gerektirir (aşağıdaki örnekleri bkz.). Ayrıca, en az bir tanesini belirtmeniz gerekmektedir topverightvebottom veya left aralarında, sabit konumlandırma etkili olacak.

Bu örnekte, elementin滚动位置到达时，sticky element sayfa üstünde kalır (top: 0)

Örnek

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  arka_plan_rengi: yeşil;
  çerçeve: 2px dolgu #4CAF50;
}

Kendiniz deneyin

Çarpışan elementler

Elementleri konumlandırırken, diğer elementlerle çarpışabilirler.

z-index Özellik, elementin katman sırasını belirtir (hangi elementin diğer elementlerin önünde veya arkasında yer alacağını).

Element, pozitif veya negatif bir katman sırası ayarlayabilir:

Bu bir başlıktır

Görselin z-index'i -1 olduğundan, metin arkasında yer alır.

Örnek

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Kendiniz deneyin

Daha yüksek katman sırasına sahip elementler, daha düşük katman sırasına sahip elementlerin önünde her zaman yer alır.

Dikkat:İki konumlandırılmış element birbirine çarpışsa ve belirtilmemişse z-indexyse, HTML kodunun sonundaki element üstte görüntülenir.

Resim içindeki metni konumlandırma

Resim üzerinde metin nasıl yerleştirilir:

Örnek

CodeW3C.com Logo
Alt Sol
Üst Sol
Üst Sağ
Alt Sağ
Merkezlenmiş

Kendiniz deneyin:

Üst Sol Üst Sağ Alt Sol Alt Sağ Merkezlenmiş

Daha fazla örnek

Elementin şeklini ayarlama
Bu örnek, nasıl bir elementin şeklini ayarlandığını gösterir. Element bu şekle kesilir ve gösterilir.

Tüm CSS konum özellikleri

özellik tanım
bottom 定位框的底部外边距边缘设置。
clip Mutlak konumlandırma elementlerini keser.
left Konumlandırma çubuğunun sol dış kenar marjini ayarlar.
position Elemanın konumlandırma türünü belirler.
right Konumlandırma çubuğunun sağ dış kenar marjini ayarlar.
top Konumlandırma çubuğunun üst dış kenar marjini ayarlar.
z-index Elementin yığın sırasını ayarlar.

Genişletilmiş okuma

İlkyazılar:CSS konum açıklaması

İlkyazılar:CSS relatif konumlandırma

İlkyazılar:CSS mutlak konumlandırma