Blog DX

Bài 15: Layers

25 tháng 8, 2014
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 
       }

Không có nhận xét nào:

Đăng nhận xét