Konumlandırma, öğeleri normal belge akışının dışına çıkarmanıza ve örneğin birbirlerinin üzerine oturarak veya tarayıcı görüntü alanı içinde her zaman aynı yerde kalarak farklı davranmalarını sağlamanıza olanak tanır. Bu makalede farklı konum değerleri ve bunların nasıl kullanılacağı açıklanmaktadır.
| Ön Koşullar: | HTML temelleri (HTML’e Giriş konusunu çalışın) ve CSS’in nasıl çalıştığına dair bir fikir edinin (CSS’e Giriş konusunu çalışın). |
|---|
Yerel bilgisayarınızda aşağıdaki alıştırmaları yapmanızı istiyoruz.
CSS Konumlandırma ile tanışın
Konumlandırma, normal belge akışını geçersiz kılarak ilginç sonuçlar üretmemizi sağlar. Peki ya biraz ilginç, sıkıntılı bir his vermek için bazı kutuların konumunu varsayılan akış konumlarından biraz değiştirmek isterseniz? Konumlandırma tam size göre bir araç. Ya da sayfanın diğer bölümlerinin üzerinde yüzen ve/veya sayfa ne kadar kaydırılırsa kaydırılsın tarayıcı penceresinin içinde her zaman aynı yerde duran bir kullanıcı arayüzü öğesi oluşturmak istiyorsanız? Konumlandırma bu tür düzen çalışmalarını mümkün kılar.
HTML öğeleri üzerinde uygulayabileceğiniz bir dizi farklı konumlandırma türü vardır. Bir öğe üzerinde belirli bir konumlandırma türünü etkin hale getirmek için position özelliğini kullanırız.
Static konumlandırma
Statik konumlandırma, her öğenin aldığı varsayılandır. Bu sadece “öğeyi belge akışındaki normal konumuna getirin – burada görülecek özel bir şey yok” anlamına gelir.
Bunu görmek için (ve örneğinizi gelecek bölümler için ayarlamak üzere) önce HTML’deki ikinci
<p>’ye positioned sınıfı ekleyin:
<p class="positioned"> ... </p>
Şimdi CSS’nizin en altına aşağıdaki kuralı ekleyin:
.positioned {
position: static;
background: yellow;
}
Kaydedip yenilediğinizde, 2. paragrafın güncellenmiş arka plan rengi dışında hiçbir fark görmezsiniz. Bu sorun değil – daha önce de söylediğimiz gibi, statik konumlandırma varsayılan davranıştır!
Relative position
Relative positioning, inceleyeceğimiz ilk pozisyon türüdür. Bu, statik konumlandırmaya çok benzer, ancak konumlandırılan öğe normal akıştaki yerini aldıktan sonra, sayfadaki diğer öğelerle çakışmasını sağlamak da dahil olmak üzere son konumunu değiştirebilirsiniz. Devam edin ve kodunuzdaki konum bildirimini güncelleyin:
position: relative;
Bu aşamada kaydedip yenilerseniz, sonuçta hiçbir değişiklik görmezsiniz. Peki öğenin konumunu nasıl değiştirirsiniz? Bir sonraki bölümde açıklayacağımız üst, alt, sol ve sağ özelliklerini kullanmanız gerekir.
top, bottom, left, ve right
konumlandırılan öğenin tam olarak nereye taşınacağını belirtmek için position ile birlikte top, bottom, left ve right kullanılır. Bunu denemek için CSS’nizdeki .positioned kuralına aşağıdaki bildirimleri ekleyin:
top: 30px;
left: 30px;
Not: Bu özelliklerin değerleri makul olarak beklediğiniz herhangi bir birimi alabilir: piksel, mm, rems, %, vb.
Şimdi kaydedip yenilerseniz, şuna benzer bir sonuç elde edersiniz:
Note: The values of these properties can take any units you’d reasonably expect: pixels, mm, rems, %, etc.
If you now save and refresh, you’ll get a result something like this:
Güzel, değil mi? Tamam, muhtemelen beklediğiniz şey bu değildi. Üst ve sol olarak belirttiğimiz halde neden alta ve sağa taşındı? Bu mantığa aykırı görünebilir. Bunu, konumlandırılmış kutunun belirtilen tarafını iten ve onu ters yönde hareket ettiren görünmez bir güç varmış gibi düşünmeniz gerekir. Yani, örneğin, top: 30px; belirtirseniz, sanki bir kuvvet kutunun üst kısmını iterek 30 piksel aşağı doğru hareket etmesine neden olur.
Absolute konumlandırma
Mutlak konumlandırma çok farklı sonuçlar getirir.
position: absolute
Kodunuzdaki position bildirimini aşağıdaki gibi değiştirmeyi deneyelim:
position: absolute;
Şimdi kaydedip yenilediğinizde aşağıdaki gibi bir şey görmeniz gerekir:
Öncelikle, konumlandırılan öğenin belge akışında olması gereken boşluğun artık orada olmadığına dikkat edin – birinci ve üçüncü öğeler artık yokmuş gibi birbirine kapanmış! Bir bakıma bu doğru. absolute konumlandırılmış bir öğe artık normal belge akışında mevcut değildir. Bunun yerine, diğer her şeyden ayrı olarak kendi katmanında oturur. Bu çok kullanışlıdır: sayfadaki diğer öğelerin düzenine müdahale etmeyen yalıtılmış kullanıcı arayüzü özellikleri oluşturabileceğimiz anlamına gelir. Örneğin, açılır bilgi kutuları, kontrol menüleri, rollover panelleri, sayfanın herhangi bir yerine sürüklenip bırakılabilen UI özellikleri vb.
İkinci olarak, öğenin konumunun değiştiğine dikkat edin. Bunun nedeni, üst, alt, sol ve sağın mutlak konumlandırma ile farklı bir şekilde davranmasıdır. Öğeyi normal belge akışı içindeki göreli konumuna göre konumlandırmak yerine, öğeyi içeren öğenin her bir kenarından olması gereken mesafeyi belirtirler. Yani bu durumda, mutlak konumlandırılmış öğeyi “içeren öğenin” üstünden 30 piksel ve solundan 30 piksel uzakta olması gerektiğini söylüyoruz. (Bu durumda, “içeren öğe” ilk içeren bloktur. Daha fazla bilgi için aşağıdaki bölüme bakın)
Note: You can use top, bottom, left, and right to resize elements if you need to. Try setting top: 0; bottom: 0; left: 0; right: 0; and margin: 0; on your positioned elements and see what happens! Put it back again afterwards…
Note: Yes, margins still affect positioned elements. Margin collapsing doesn’t, however.
Konumlandırma bağlamları
Absolute olarak konumlandırılmış bir elemanı “içeren eleman” hangi elemandır? Bu, büyük ölçüde konumlandırılan öğenin atalarının konum özelliğine bağlıdır (Bkz. İçeren bloğu tanımlama).
Hiçbir ata öğenin konum özelliği açıkça tanımlanmamışsa, varsayılan olarak tüm ata öğeler statik bir konuma sahip olacaktır. Bunun sonucu olarak, absolute konumlandırılmış eleman ilk içeren blokta yer alacaktır. İlk içeren blok, görüntü alanının boyutlarına sahiptir ve aynı zamanda öğesini içeren bloktur. Başka bir deyişle, absolute konumlandırılmış öğe öğesinin dışında görüntülenecek ve ilk görünüm alanına göre konumlandırılacaktır.
Konumlandırılmış öğe HTML kaynağında öğesinin içine yerleştirilmiştir, ancak son düzende sayfanın üst ve sol kenarlarından 30 piksel uzaktadır. Konumlandırma bağlamını, yani mutlak olarak konumlandırılmış öğenin hangi öğeye göre konumlandırıldığını değiştirebiliriz. Bu, konumlandırma öğenin atalarından birine göre ayarlanarak yapılır: içinde yuvalandığı öğelerden birine (içinde yuvalanmadığı bir öğeye göre konumlandıramazsınız). Bunu görmek için body kuralınıza aşağıdaki bildirimi ekleyin:
position: relative;
Bu, aşağıdaki sonucu vermelidir:
Konumlandırılan öğe artık <body> öğesine göreli olarak oturur.
z-index
Tüm bu mutlak konumlandırma olayı iyi ve eğlencelidir, ancak henüz dikkate almadığımız başka bir özellik daha var. Öğeler üst üste gelmeye başladığında, hangi öğelerin diğerlerinin üzerinde ve hangi öğelerin diğerlerinin altında görüneceğini ne belirler? Şimdiye kadar gördüğümüz örnekte, konumlandırma bağlamında yalnızca bir konumlandırılmış öğemiz var ve konumlandırılmış öğeler konumlandırılmamış öğelere göre daha avantajlı olduğu için en üstte görünüyor. Peki ya birden fazla olduğunda?
İlk paragrafı da absolute olarak konumlandırmak için CSS’nize aşağıdakileri eklemeyi deneyin:
p:nth-of-type(1) {
position: absolute;
background: lime;
top: 10px;
right: 30px;
}
Bu noktada, ilk paragrafın kireç renginde olduğunu, belge akışının dışına taşındığını ve başlangıçta bulunduğu yerden biraz yukarıda konumlandırıldığını göreceksiniz. Ayrıca, orijinal .positioned paragrafının altında, ikisinin çakıştığı yerde istiflenmiştir. Bunun nedeni, .positioned paragrafının kaynak sıralamasındaki ikinci paragraf olması ve kaynak sıralamasında daha sonra konumlandırılan öğelerin kaynak sıralamasında daha önce konumlandırılan öğelere üstün gelmesidir.
İstifleme sırasını değiştirebilir misiniz? Evet, z-index özelliğini kullanarak yapabilirsiniz. “z-index”, z eksenine bir referanstır. Önceki derslerimizde web sayfalarında arka plan resimleri ve alt gölge uzaklıkları gibi şeylerin konumlandırılması için yatay (x ekseni) ve dikey (y ekseni) koordinatların kullanılmasını tartıştığımızı hatırlayabilirsiniz. Soldan sağa doğru ilerleyen diller için (0,0) sayfanın (veya öğenin) sol üst köşesidir ve x ve y eksenleri sayfanın sağından aşağıya doğru ilerler.
Web sayfalarında ayrıca bir z-ekseni vardır: ekranınızın yüzeyinden yüzünüze (veya ekranın önünde olmasını istediğiniz başka bir şeye) doğru uzanan hayali bir çizgi. z-index değerleri, konumlandırılmış öğelerin bu eksende nereye oturduğunu etkiler; pozitif değerler onları yığının yukarısına taşır, negatif değerler ise onları yığının aşağısına taşır. Varsayılan olarak, konumlandırılmış öğelerin tümü otomatik bir z-indeksine sahiptir, bu da etkin olarak 0’dır.
Yığın sırasını değiştirmek için, p:nth-of-type(1) kuralınıza aşağıdaki bildirimi eklemeyi deneyin:
z-index: 1;
Şimdi üstte kireç paragrafını görmelisiniz:
z-index’in yalnızca birimsiz indeks değerlerini kabul ettiğini unutmayın; bir öğenin Z ekseninin 23 piksel yukarısında olmasını istediğinizi belirtemezsiniz – bu şekilde çalışmaz. Daha yüksek değerler daha düşük değerlerin üzerinde yer alacaktır ve hangi değerleri kullanacağınız size bağlıdır. 2 veya 3 değerlerini kullanmak 300 veya 40000 değerleriyle aynı etkiyi verecektir.
Fixed position
Şimdi sabit konumlandırmaya bakalım. Bu, mutlak konumlandırma ile tamamen aynı şekilde çalışır, ancak önemli bir fark vardır: mutlak konumlandırma bir öğeyi en yakın konumlandırılmış atasına (yoksa ilk içeren bloğa) göre yerine sabitlerken, sabit konumlandırma genellikle bir öğeyi görünüm alanının görünür kısmına göre yerine sabitler. (Bunun bir istisnası, öğenin atalarından birinin sabit bir içeren blok olması ve transform özelliğinin none dışında bir değere sahip olmasıdır). Bu, sayfa ne kadar kaydırılırsa kaydırılsın her zaman görünür olan kalıcı gezinme menüleri gibi yerinde sabitlenmiş kullanışlı kullanıcı arabirimi öğeleri oluşturabileceğiniz anlamına gelir.
Ne demek istediğimizi göstermek için basit bir örnek oluşturalım. Öncelikle, mevcut p:nth-of-type(1) ve .positioned kurallarını CSS’nizden silin.
Şimdi position: relative; bildirimini kaldırmak ve sabit bir yükseklik eklemek için body kuralını aşağıdaki gibi güncelleyin:
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
Şimdi <h1> öğesine position: fixed; değerini vereceğiz ve görüntü alanının en üstünde yer almasını sağlayacağız. CSS’nize aşağıdaki kuralı ekleyin:
h1 {
position: fixed;
top: 0;
width: 500px;
margin-top: 0;
background: white;
padding: 10px;
}
top: 0; ekranın üst kısmına yapışmasını sağlamak için gereklidir. Başlığa içerik sütunuyla aynı genişliği veriyoruz ve ardından içeriğin altında görünmemesi için beyaz bir arka plan ve biraz dolgu ve kenar boşluğu veriyoruz.
Kaydedip yenilediğinizde, başlığın sabit kalmasıyla ilgili eğlenceli bir efekt göreceksiniz – içerik yukarı kayıyor ve altında kayboluyor gibi görünüyor. Ancak içeriğin bir kısmının başlangıçta başlığın altında nasıl kırpıldığına dikkat edin. Bunun nedeni, konumlandırılmış başlığın artık belge akışında görünmemesi, dolayısıyla içeriğin geri kalanının en üste taşınmasıdır. Paragrafları biraz aşağı taşıyarak bu durumu iyileştirebiliriz. Bunu, ilk paragrafta bir miktar üst kenar boşluğu ayarlayarak yapabiliriz. Bunu şimdi ekleyin:
p:nth-of-type(1) {
margin-top: 60px;
}
Şimdi bitmiş örneğimizi aşağıdakine benzer olarak görmelisiniz:
Sticky position
Diğerlerinden biraz daha yeni olan position: sticky adında başka bir pozisyon değeri daha mevcuttur. Bu temelde göreli ve sabit konum arasında bir melezdir. Konumlandırılmış bir öğenin belirli bir eşiğe (örneğin, görüntü alanının üstünden 10 piksel) kaydırılana kadar göreceli olarak konumlandırılmış gibi davranmasını sağlar, ardından sabit hale gelir.
Basit bir örnek
Yapışkan konumlandırma, örneğin bir gezinme çubuğunun belirli bir noktaya kadar sayfayla birlikte kaymasını ve ardından sayfanın üst kısmına yapışmasını sağlamak için kullanılabilir.
.positioned {
position: sticky;
top: 30px;
left: 30px;
}
Kaydırmalı indeks
position: sticky’nin ilginç ve yaygın bir kullanımı, farklı başlıkların sayfaya ulaştıkça sayfanın üst kısmına yapıştığı kayan bir indeks sayfası oluşturmaktır. Böyle bir örnek için biçimlendirme şöyle görünebilir:
<h1>Sticky positioning</h1>
<dl>
<dt>A</dt>
<dd>Apple</dd>
<dd>Ant</dd>
<dd>Altimeter</dd>
<dd>Airplane</dd>
<dt>B</dt>
<dd>Bird</dd>
<dd>Buzzard</dd>
<dd>Bee</dd>
<dd>Banana</dd>
<dd>Beanstalk</dd>
<dt>C</dt>
<dd>Calculator</dd>
<dd>Cane</dd>
<dd>Camera</dd>
<dd>Camel</dd>
<dt>D</dt>
<dd>Duck</dd>
<dd>Dime</dd>
<dd>Dipstick</dd>
<dd>Drone</dd>
<dt>E</dt>
<dd>Egg</dd>
<dd>Elephant</dd>
<dd>Egret</dd>
</dl>
CSS aşağıdaki gibi görünebilir. Normal akışta <dt> öğeleri içerikle birlikte kaydırılır. <dt> öğesine position: sticky eklediğimizde, 0 top değeriyle birlikte, destekleyen tarayıcılar bu konuma ulaştıklarında başlıkları görüntü alanının en üstüne yapıştıracaktır. Ardından gelen her başlık, o konuma kadar kaydırıldığında bir öncekinin yerini alacaktır.
dt {
background-color: black;
color: white;
padding: 10px;
position: sticky;
top: 0;
left: 0;
margin: 1em 0;
}
Yapışkan öğeler, atalarının konum özelliği tarafından belirlenen bir “kaydırma mekanizması” ile en yakın ataya göre “yapışkandır”.
Özet
Eminim temel konumlandırma ile oynarken çok eğlenmişsinizdir. Tüm düzenler için kullanmak için ideal bir yöntem olmasa da, uygun olduğu birçok özel amaç vardır.