css-mizanpaj-konum-mulkiyet

positionÖzelliği, bir element için kullanılan yerleştirme yöntemi türünü belirtir (tam ya da yapışkan, sabit, göreceli, statik).

Pozisyon mülkü

positionÖzelliği, bir element için kullanılan yerleştirme yöntemi türünü belirtir.

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

static

relative

fixed

absolute

sticky



konum: statik;

HTML öğeleri varsayılan olarak statik olarak konumlandırılır.

Statik konumlu elemanlar üst, alt, sol ve sağ özelliklerden etkilenmez.

İçindeki bir unsur position: static;herhangi bir özel yönde konumlandırılmamıştır; her zaman sayfanın normal akışına göre konumlandırılır:

div.static {

position: static;

border: 3px solid #73AD21;

}



konum: göreli;

Ile position: relative; olan bir eleman normal konumuna göre yerleştirilir.

Nispeten konumlandırılmış bir öğenin üst, sağ, alt ve sol özelliklerini ayarlamak, normal konumundan uzaklaşmasına neden olur. Diğer içerik, öğenin bıraktığı boşluklara uyacak şekilde ayarlanmayacaktır.

div.relative {

position: relative;

left: 30px;

border: 3px solid #73AD21;

}



pozisyon: sabit;

Ile içeren bir öğe position: fixed;, görüntü kaydırma çubuğuna göre konumlandırılır; bu, sayfa kaydırılmış olsa bile her zaman aynı yerde kalması demektir. Üst, sağ, alt ve sol özellikler öğenin konumunu belirlemek için kullanılır.

Sabit bir öğe, normalde bulunduğu sayfada boşluk bırakmaz.

Sayfanın sağ alt köşesindeki sabit elemente dikkat edin. İşte kullanılan CSS:

div.fixed {

position: fixed;

bottom: 0;

right: 0;

width: 300px;

border: 3px solid #73AD21;

}



pozisyon: mutlak;

Ile bir eleman position: absolute;, en yakın konumlanmış ataya göre konumlandırılmıştır (sabit gibi, görüntüleme alanına göre konumlandırılmış).

Ancak; mutlak konumlandırılmış bir öğe atanmış konuma sahip değilse, belge gövdesi kullanılır ve sayfa kaydırma ile birlikte hareket eder.

Not: "konumlandırılmış" bir unsur, konumunun dışında bir şeydir static.

div.relative {

position: relative;

width: 400px;

height: 200px;

border: 3px solid #73AD21;

}

div.absolute {

position: absolute;

top: 80px;

right: 0;

width: 200px;

height: 100px;

border: 3px solid #73AD21;

}



pozisyon: yapışkan;

Ile bir öğe position: sticky;, kullanıcının kaydırma konumuna dayalı olarak konumlandırılır.

Yapışkan bir öğe kaydırma konumuna bağlı olarak relativeve arasında geçiş yapar fixed. Görünüm alanında belirli bir ofset konumu sağlanıncaya kadar göreceli olarak konumlandırılır - daha sonra yerinde "yapışır" (konum gibi: sabit).



Not: Internet Explorer, Edge 15 ve önceki sürümleri yapışkan konumlandırmayı desteklemez. Safari, bir -webkit-öneki gerektirir (aşağıdaki örneğe bakın). Ayrıca en az birini belirtmelisiniz top, right, bottomveya leftyapışkan konumlandırma çalışması için.

div.sticky {

position: -webkit-sticky; /* Safari */

position: sticky;

top: 0;

background-color: green;

border: 2px solid #4CAF50;

}



Çakışan Elemanlar

Elemanlar konumlandırıldığında, diğer öğelerle çakışabilir.

z-indexÖzelliği (eleman arkasından önüne yerleştirilen ya da olmalıdır, diğerleri) bir elemanın grup sırasını belirtir.

img {

position: absolute;

left: 0px;

top: 0px;

z-index: -1;

}

Not: İki konumlandırılmış öğe z-index belirtilen olmadan çakışırsa , en son HTML kodunda konumlandırılan öğe üstte gösterilir.