İçindekiler
Hepimiz CSS konumlandırmanın(CSS Position) bazen kafa karıştırıcı olabileceğini biliyoruz. Bir düzen tasarlarken, öğelerinizi ve çevresindeki öğeleri nasıl konumlandırdığınızı düşünürsünüz. Ancak, web düzenlerinizi tasarlamanın birkaç yolu vardır ve CSS konum özelliği seçeneklerden biridir.
Basit bir benzetme yapalım ve CSS konum özelliğini inceleyelim.
Paketleme ve Konumlandırma (CSS Position)
Bir yere gitmek için sırt çantanızı topladığınızı hayal edin. Eşyalarınızı nasıl paketlersiniz? Her şeyi tek tek paketlemeden sırt çantasının içine bırakırsanız, siz yerleştirmeden her şey sırt çantasında otomatik olarak kendi konumuna sahip olacaktır. Ancak, istediğiniz gibi konumlandırırsanız ve her şeyi tek tek paketlerseniz, sırt çantanıza koyduğunuz eşyalarınıza özel bir konum atarsınız.
Şimdi bir web sayfasının sırt çantanız olduğunu ve o sayfadaki öğelerin sırt çantanızdaki öğeler olduğunu düşünelim. Peki öğelerinizi bu web sayfasında nasıl konumlandırıyorsunuz? Normal akışı anlamak için buradaki yazıyı okumanızı tavsiye ederim.
CSS Position Özelliği
CSS position, istediğimiz öğeleri değiştirmemize ve taşımamıza yardımcı olan bir özelliğe sahiptir . Bu pozisyon özelliğinde 5 değer vardır.
- Static position
- Relative position
- Absolute position
- Fixed position
- Sticky position
Static Position
Statik konum, varsayılan veya “normal” konumdur. Yani, dikkatlice düzenlemeden paketlenmiş sırt çantasını alırsak, içindeki eşyalar varsayılan bir pozisyon alır.
Bir web sayfasında, statik konumlandırma ile sayfaya eklenen 3 element varsa, sayfanın normal akışını alacaktır. Bu nedenle, üst, sağ, alt, sol veya z-endeksi özelliklerinde yapılacak herhangi bir değişiklik herhangi bir fark yaratmaz.
Sırt çantanıza bazı eşyalar ekleyelim ve statik konumlandırma ile nasıl görüneceğini görelim.
Yukarıdaki resimde sırt çantasındaki eşyaların birbiri ardına dizildiğini görebilirsiniz. Bunun nedeni, her bir öğenin konum değerinin varsayılan değer olan statik olarak ayarlanmış olmasıdır. Normal akışa göre otomatik olarak düzenlenir.
Static Konumlandırma CodePen Örneği;
See the Pen Static Position by Webolog (@webolog) on CodePen.0
Relative Position
Göreceli konumlandırma, öğenize mevcut konumuna göre hareket etmesini söyler. Yani örneğin su şişenizi yemek kutusunun yanına taşımak istiyorsanız, konumu göreceli olarak atamanız ve yemek kutusunun yanına hareket etmek için ilgili değerleri vermeniz gerekir.
Şişeyi yemek kutusunun yanına getirdiğinizde, başlangıçta işgal ettiği konum boştur, çünkü şişeyi hareket ettirdiğiniz için kalem kutusu o yeri almamıştır.
Göreceli konumlandırmada, konumu değiştirdiğinizde, belirli öğenin orijinal alanı normal akıştan çıkarılmaz.
Aşağıdaki resme bakarsanız, su şişesinin beslenme çantası yanında hareket ettiğini ancak normal akıştan çıkarılmayacağı için orijinal alanın boş kaldığını göreceksiniz.
Relative Konumlandırma CodePen Örneği;
See the Pen Untitled by Webolog (@webolog) on CodePen.0
Absolute Position
Konumlandırmalar içerisinde en kafa karıştırıcısı absolute position dır. Diyelim ki su şişenizi sırt çantasının cebine koymak istiyorsunuz. Eğer öyleyse, bu cebin kendisine atanmış olan statik konum dışında relative veya başka bir konumu olmalıdır. Böylece cebin içine tam olarak yerleştirebiliriz ve bu pozisyon cebe göre belirlenir.
Cebin statik dışında kendisine atanmış bir konumu yoksa ve statik olmayan bir konuma atanmış en yakın eşya veya yer yoksa, sırt çantasının sağ üst köşesine hareket edecektir. Bu, kendisini sırt çantasına göre konumlandıracağı anlamına gelir; daha sonra, onu yerleştirmek istediğiniz yere göre mutlak bir konum atayabilirsiniz.
Basitçe, mutlak konumun çalışması için üst öğenin statik dışında bir konum özellik değerine sahip olması gerektiği anlamına gelir. Konum özelliği değerine sahip bir öğe yoksa, öğe görünüm alanına göre konumlandırılacaktır.
Bir öğeye mutlak bir konum atadığınızda, normal akıştan kaldırır, öğenin başlangıçta kapladığı alan artık orada değildir.
Aşağıdaki resmi kontrol edin. Artık su şişeniz cebin içinde mutlak bir konuma sahip. Ayrıca kalem kutusu şişenizin orijinal yerine taşınmıştır.
See the Pen Untitled by Webolog (@webolog) on CodePen.0
Fixed Position
Sabit konumlandırma, o yerde eşya olup olmadığına bakılmaksızın eşyalarınızı istediğiniz yere yerleştirmek gibidir. Yani örneğin şişenizi aşağıdaki resimdeki gibi sağa kaydırdınız diyelim; orada başka bir kitap varsa, yine de oraya yerleştirebilir ve onu diğer öğenin üstüne mi yoksa altına mı yerleştirmek istediğinize karar verebilirsiniz.
Elemanınıza sabit bir pozisyon atadığınızda normal akıştan da çıkar. Ve görünüm alanına göre konumlandırılmıştır. Böylece sayfayı kaydırdığınızda, öğe sayfanın orijinal konumunda kalır.
See the Pen Fixed Position by Webolog (@webolog) on CodePen.0
Sticky Position
Adından da anlaşılacağı gibi, eşyanızı belirli bir yere yapıştırdığınız anlamına gelir. Bu nedenle, örneğin, şişenizi sırt çantanızın üstüne yapıştırırsanız, sırt çantalarını aşağı ve yukarı kaydırdığınızda sırt çantanızda o belirli konuma yapışacaktır.
Yapışkan pozisyonun davranışı, göreceli ve sabit pozisyonların bir kombinasyonudur. Basitçe, sırt çantasının içinde sabit bir pozisyon olarak hareket edecek ve hareket etmeyecektir. İkinci sırt çantasına geçtiğinizde ilk sırt çantasına yapışıyor ve ona göre hareket ediyor.
See the Pen Sticky Position by Webolog (@webolog) on CodePen.0
Z-index Nedir?
Örtüşen öğeleriniz olduğunda, bunları yığmak için Z-endeksini kullanırız.
Diyelim ki üst üste koymanız gereken bir yığın kitabınız var. Yani her birine bir numara veriyorsunuz ve tek tek yığıyorsunuz. En yüksek sayı yığının en üstünde ve en düşük sayı yığının altındadır.
Z-index, öğeleri istiflediğimiz şekilde istiflemenize yardımcı olur. Statik konum dışında bir konum değerine sahip herhangi bir öğe, z-index özelliğini kullanabilir.
Z-endeksi, öğelerin hangi sırayla, nasıl üst üste gelmesi gerektiğine karar verme yeteneği verir. Daha yüksek bir z-endeksi değeri verirseniz, söz konusu öğe görüntüleyiciye daha yakın görünecektir. Başka bir deyişle, diğer öğelerin üstünde görünecektir.
Turkish
English