CSS Düzeni - Konum Özellik
Özellik position, bir öğe için kullanılan konumlandırma yönteminin türünü belirtir (statik, göreli, sabit, mutlak veya yapışkan).
Konum Özellik
Özellik position, bir öğe için kullanılan konumlandırma yönteminin türünü belirtir.
Beş farklı konum değeri vardır:
staticrelativefixedabsolutesticky
Elemanlar daha sonra üst, alt, sol ve sağ özellikler kullanılarak konumlandırılır. Ancak, bu özellikler önce position
özellik ayarlanmadıkça çalışmayacaktır. Ayrıca konum değerine bağlı olarak farklı çalışırlar.
konum: statik;
HTML öğeleri varsayılan olarak statik olarak konumlandırılır.
Statik konumlu elemanlar üst, alt, sol ve sağ özelliklerden etkilenmez.
Bir eleman position: static;herhangi bir özel şekilde konumlandırılmamıştır; her zaman sayfanın normal akışına göre konumlandırılır:
İşte kullanılan CSS:
Örnek
div.static {
position: static;
border: 3px solid #73AD21;
}
pozisyon: göreceli;
İle bir eleman position: relative;, normal konumuna göre konumlandırılır.
Nispeten konumlandırılmış bir elemanın üst, sağ, alt ve sol özelliklerinin ayarlanması, normal konumundan uzağa ayarlanmasına neden olur. Diğer içerik, öğenin bıraktığı boşluğa sığacak şekilde ayarlanmayacaktır.
İşte kullanılan CSS:
Örnek
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
pozisyon: sabit;
Bir öğe position: fixed;görünüm alanına göre konumlandırılır, yani sayfa kaydırılsa bile her zaman aynı yerde kalır. Öğeyi konumlandırmak için üst, sağ, alt ve sol özellikler kullanılır.
Sabit bir öğe, normalde bulunduğu yerde sayfada bir boşluk bırakmaz.
Sayfanın sağ alt köşesindeki sabit öğeye dikkat edin. İşte kullanılan CSS:
Örnek
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;konum: mutlak;
İle bir öğe, position: absolute;en yakın konumlandırılmış ataya göre konumlanmıştır (sabit gibi, görünüm alanına göre konumlanmak yerine).
Ancak; Mutlak konumlandırılmış bir öğenin konumlandırılmış ataları yoksa, belge gövdesini kullanır ve sayfa kaydırma ile birlikte hareket eder.
Not: Mutlak konumlandırılmış öğeler normal akıştan çıkarılır ve öğelerle örtüşebilir.
İşte basit bir örnek:
İşte kullanılan CSS:
Örnek
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;
İle bir öğe position: sticky;, kullanıcının kaydırma konumuna göre konumlandırılır.
Yapışkan bir öğe , kaydırma konumuna bağlı olarak relativeve arasında geçiş yapar. fixedGörünüm alanında belirli bir ofset konumu karşılanana kadar göreli olarak konumlandırılır - ardından yerine "yapışır" (konum:sabit gibi).
Not: Internet Explorer, yapışkan konumlandırmayı desteklemez. Safari, bir -webkit- öneki gerektirir (aşağıdaki örneğe bakın). Yapışkan konumlandırmanın çalışması için top, veya öğelerinden en az birini rightde belirtmelisiniz .bottomleft
top: 0Bu örnekte, kaydırma konumuna ulaştığınızda yapışkan öğe sayfanın ( ) üstüne yapışır .
Örnek
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Bir Görüntüde Metni Konumlandırma
Bir resmin üzerine metin nasıl yerleştirilir:
Örnek
Kendin dene:
Daha fazla örnek
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |