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
  • Kredili Sistemde Ders Geçmek İçin Kaç Almalısınız?
    Benim 1sinifim ilk donem iyi gecti ikinci donem derslerden kaldim 2.yilimda mi kaldigim dersleri mi ver...
  • PHP Array | Dizi İçinde Tekrar Eden Elemanların Sayısını Alma
    Sen kralsın kardeşim :) 5 saattir bunu arıyordum...
  • Türkiye'de Hangi Burçtan Kaç Kişi Var?
    Çok güzel ve doğru ki muhtemelen akrep olduğum içindir. :)...
  • Jako Beslenme Diyeti - Afrika Gri Papağanı neler yer, hangi gıdalar zararlıdır
    harika bir çalışma teşekkürler...
  • Windows 7 ve Vista Tüm Dil Paketleri - SP1 SP2 RTM x86 32bit x64 64bit
    Teşekkürler çok yardımcı oldu ...
  • Genel İşletme 1. Dönem Vize Soruları
    soru 3 şıklarında yanlışlık vardır tüketim ve hizmet aynı kapasitede yer alıp ikisi de cevap kabul edil...
  • Türkiye Ekonomisi 1. ve 9. Üniteler Ders Notları
    çok iyi baya işime yaradı cidden...