CSS ile Üst Üste Objeler - Katman Oluşturma (Tabaka - Layer)

CSS ile aynen photoshoptaki gibi katmanlar (layer) oluşturup bunları istediğimiz gibi kullanalabiliriz. CSS katmanları, z-index özelliğini birbirleriyle örtüşen öğelere uygulamak için kullanılır. Z-index özelliği ile position özelliği bu işelmin tamamlayıcılarıdır. Z-inden ile hangi öğenin üstte olması gerektiğini ve hangi öğenin alt kısımda olması gerektiğini belirtebilirsiniz.

z-index özelliği daha karmaşık web sayfası düzenleri oluşturmanıza yardımcı olabilir.

Aşağıda, CSS'de katmanların nasıl oluşturulacağını gösteren örnek verilmiştir.

<div style = "background-color:blue; 
	width:300px; 
	height:100px; 
	position:relative; 
	top:10px; 
	left:80px; 
	z-index:2">
</div>
<div style = "background-color:red; 
	width:300px; 
	height:100px; 
	position:relative; 
	top:-60px; 
	left:35px; 
	z-index:1;">
</div>
<div style = "background-color:orange; 
	width:300px; 
	height:100px; 
	position:relative; 
	top:-220px; 
	left:120px; 
	z-index:3;">
</div>

Örnek Çıktısı;

 

 

 
 
 


Etiketler: CSS

İlk yorumu siz yazın !..

  • Yorumunuz en az 30 karakter olmalıdır. (0)
Sitede Ara
  • Evcil Kuş Hastalıkları ve Tedavi Yöntemleri
    Merhaba, geçmiş olsun bu durumda kendi başınıza tedavi uygulamanız zor olsa da kırık çıkık için tıklayı...
  • Finansal Yönetim Ders Notları | 1-7
    gerçekten emeğinize sağlık çok güzel bir anlatım olmuş....
  • Yazımı Karıştırılan Sözcükler | TDK Yazım Kılavuzu | Doğru Kelime Klavuzu
    Atölye Fransızca'dan dilimize geçmiş bir isimdir. Fransızca atelier olarak yazılır. Evet atelye ...
  • Online Cetvel Sitesi
    Bu ayarları yaptıktan sonra elimdeki cetvelle test ettim gerçekten doğru gösteriyor. Ekrana tuttuğum ce...
  • Doğal Varlık Nedir - Anlamı ve Örnekler
    Çook sevdim bu siteyi... ...
  • 2019 Yeni Golf MK8 Ne Zaman Çıkacak?
    Yabancı para piyasayı allak bullak etti. 2017 yılında golf 7.5 aldım, opsiyonlarıyla birlikte 115.500₺y...
  • İşlemci Veriyolu Hızı Nedir ? Nasıl Çalışır
    İyi bir bilgi olmuş teşekkürler! ...