Bài 15: Layers

CSS hoạt động trên cả 3 chiều: cao, rộng, sâu. Hai chiều đầu tiên, chúng ta đã được nhìn thấy trong các bài học trước. Trong bài học này, chúng ta sẽ được học về cách đặt các thành phần web ở các lớp khác nhau với thuộc tính z-index. Nói đơn giản hơn thì đó là cách bạn đặt một thành phần này lên trên một thành phần khác.
Với mục đích này, bạn sẽ gán cho mỗi phần tử một con số. Theo đó, phần tử có số cao hơn sẽ nằm trên, phần tử có số thấp hơn sẽ nằm dưới.

Ví dụ sau chúng ta sẽ đặt 5 bức ảnh logo ở 5 lớp.

#logo1 { 
         position:absolute; 
         top:70px; 
         left:50px; 
         z-index:1 
       }
#logo2 { 
         position:absolute; 
         top:140px; 
         left:100px; 
         z-index:2 
       }
#logo3 { 
         position:absolute; 
         top:210px; 
         left:150px; 
         z-index:3 
       }
#logo4 { 
         position:absolute; 
         top:280px; 
         left:200px; 
         z-index:4 
       }
#logo5 { 
         position:absolute; 
         top:350px; 
         left:250px; 
         z-index:5 
       }