İlginizi Çekebilir

CSS Konumlandırma

CSS Konumlandırma

CSS konumlandırma özelliği sayesinde; web sitesinde bulunan içeriklerin ve öğe gruplarının konumlandırmasını kolayca yapabilmekteyiz. Genellikle, web sitesi içerisinde bulunan div elementleri üzerinde kullanılır. CSS Konumlandırma yaparken çeşitli parametre özellikleri kullanmaktayız: Static – Fixed – Relative – Absolute – z-index
Konumlandırma yaparken kullanılabilir parametreler:

ÖzellikAçıklamaAldığı Değerler
bottomAlt boşluğu ayarlarAuto, sayı değeri
topÜst boşluğu ayarlarAuto, sayı değeri
leftSol boşluğu ayarlarAuto, sayı değeri
rightSağ boşluğu ayarlarAuto, sayı değeri
clipElemanı kırpmak içindirAuto, Shape
overflowSınırları taştığı zaman oluşacak eylemi belirtirAuto, Hidden, Scroll, Visible
positionNesne konumunu belirtirAbsolute, Fixed, Relative, Static
z-indexZ eksenine göre ayarlarAuto, sayı değeri

 

Statik konumlandırma (position:static;)

Konumlandırmanın varsayılan olarak değeridir. Statik olarak konumlandırılan öğelerin durumunda değişim olmaz.
CSS Konumlandırma

 
 

Göreceli Konumlandırma (position:relative;)

Div bölümlerinin birbirleriyle olan konumlandırması için kullanılır. Div bölümlerinin arasında ki uzaklık, konumu, durumu gibi ayarlamalar yapmak için kullanılır.
CSS Konumlandırma

 
 

Mutlak Konumlandırma (position:absolute;)

Konumlandırma yaparken belirtilen değerleri, tarayıcı penceresine göre ayarlayarak mutlak konumlandırmayı gerçekleştirir.
CSS Konumlandırma Mutlak
 
 

 
 

Örtüşen Elemanları Konumlandırma (z-index)

Div elemanlarının hangisinin üstte, hangisinin arkada gözükeceğini z-index parametresi ile yapmaktayız.
İlk olarak kutularımızı tanıyalım.
Pembe kutu: kutu1 | Kahverengi kutu: kutu2 | Turuncu kutu: kutu3
 
Birinci örneğimizde: turuncu kutu en başta, kahverengi kutu ortada, pembe kutu en arkada olacak şekilde ayarlayalım.
CSS Konumlandırma Z-Index

 
İkini örneğimizde: pembe kutu en başta, kahverengi kutu ortada, turuncu kutu en arkada olacak şekilde ayarlayalım.
CSS Konumlandırma Z-Index 2

 
Üçüncü örneğimizde: kahverengi kutu önde, diğer iki kutumuz arkada olacak şekilde ayarlayalım.
CSS Konumlandırma Z-Index 3

Yorum Yap

Yorum Yap

Yorumlar (2)

  1. 2 ay önce

    oktay ala sonunda işinin başına döndü

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir