Ders 15: z-index (Katmanlar) ile katman Katman

CSS üç boyutlu olarak çalışır - yükseklik, genişlik ve derinlik. Biz daha önceki derslerde ilk iki boyutu gördük. Bu derste, farklı unsurlar katmanları haline izin öğreneceksiniz. Kısaca, bu elemanlar birbirlerine üst üste olan sırası anlamına gelir.

Bu amaçla, her öğenin bir sayı (atayabilirsiniz z-index ). Sistem olduğunu daha düşük bir sayı ile daha yüksek bir sayı örtüşür bir öğe ile bir eleman.

Bize poker oynamaya ve floş royal sahiptir diyelim. Bizim taraftan her kart var bir şekilde sunulabilir z-index :

Bu durumda, bir başka sayıları (1-5) ile ilgili aşağıdaki fakat aynı sonucu 5 farklı numaralar kullanılarak elde edilebilir. Önemli olan sayı kronolojik sırası (sırayla) 'dir.

Kartı örnekteki kod şöyle olabilir:

	  	# Ten_of_diamonds {  		position: absolute;  		left: 100px;  		top: 100px;  		z-index: 1;  	}    	# Jack_of_diamonds {  		position: absolute;  		left: 115px;  		top: 115px;  		z-index: 2;  	}    	# Queen_of_diamonds {  		position: absolute;  		left: 130px;  		top: 130px;  		z-index: 3;  	}    	# King_of_diamonds {  		position: absolute;  		left: 145px;  		top: 145px;  		z-index: 4;  	}    	# Ace_of_diamonds {  		position: absolute;  		left: 160px;  		top: 160px;  		z-index: 5;  	}  	  	

Yöntemi nispeten basit olmasına rağmen olasılıklar birkaç vardır. Metin vb yukarıdaki metni veya metin görüntüleri yerleştirebilirsiniz

Özet

Katmanlar birçok durumda da kullanılabilir. Örneğin, kullanmaya çalıştığınızda z-index manşetlere etkiler yerine bu grafik olarak oluşturmak oluşturmak için. Bir kere, bu metni yüklemek için daha hızlı ve diğeri için, bu arama motorları bir potansiyel olarak daha iyi bir sıralama sağlar.