[BÀI 12]Thuộc tính z-index trong CSS
Thuộc tính z-index trong CSS. Cú pháp : z-index : ‘giá trị’; Thuộc tính z-index thiết lập thứ tự xếp chồng nhau của một thành phần vị trí. Thứ tự chồng nhau được sắp xếp dựa theo giá trị số, thành phần HTML nào có chỉ số z-index cao hơn sẽ nằm trên, ngược lại sẽ nằm dưới, giá trị ...
Thuộc tính z-index trong CSS.
Cú pháp : z-index : ‘giá trị’;
Thuộc tính z-index thiết lập thứ tự xếp chồng nhau của một thành phần vị trí.
Thứ tự chồng nhau được sắp xếp dựa theo giá trị số, thành phần HTML nào có chỉ số z-index cao hơn sẽ nằm trên, ngược lại sẽ nằm dưới, giá trị mặc định là 0.
Có thể sử dụng số âm.
Các giá trị của z-index :
+ auto : tự động sắp xếp chồng lên theo thứ tự mặc định của HTML.
+ số nguyên : sắp xếp theo giá trị truyền vào.
+ inherit : thừa hưởng z-index từ thành phần cha.
Chú ý: z-index chỉ làm việc cùng với thuộc tính position : absolute
Ví dụ 1 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .yellow{ awidth: 100px; height: 100px; background-color: yellow; z-index: 1; } .blue{ awidth: 100px; height: 100px; background-color: blue; z-index: 2; } .red{ awidth: 100px; height: 100px; background-color: red; z-index: 3; } </style> <body> <div class="yellow"></div> <div class="blue"></div> <div class="red"></div> </body> </html> |
Kết quả :
Không có gì khác bình thường vì z-index không có tác dụng khi thẻ không khai báo position : absolute.
Ví dụ 2 mình sẽ cho thêm position vào từng thẻ và dịch chuyển các thẻ một chút xem điều gì xảy ra nhé :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .yellow{ awidth: 100px; height: 100px; background-color: yellow; position: absolute; z-index: 1; margin-top: 100px; margin-left: 100px; } .blue{ awidth: 100px; height: 100px; background-color: blue; position: absolute; z-index: 2; margin-top: 50px; margin-left: 50px; } .red{ awidth: 100px; height: 100px; background-color: red; position: absolute; z-index: 3; } </style> <body> <div class="yellow"> </div> <div class="blue"></div> <div class="red"></div> </body> </html> |
Kết quả :
Thẻ ‘red’ có giá trị z-index lớn nhất nên nó đè lên 2 thẻ còn lại.
Ví dụ 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .yellow{ awidth: 100px; height: 100px; background-color: yellow; } .blue{ awidth: 100px; height: 100px; background-color: blue; margin-top: -50px; } </style> <body> <div class="yellow"> </div> <div class="blue"></div> </body> </html> |
Kết quả :
Mình để 2 thẻ ‘yellow’ và ‘blue’, thẻ ‘yellow’ đứng trước, thẻ blue đứng sau nên theo mặc định của HTML thì thẻ ‘blue’ sẽ đè lên thẻ ‘yellow’.
Vậy bây giờ mình muốn thẻ ‘blue’ nằm dưới thẻ ‘yellow’ thì sẽ xử lý như thế nào ?
Các bạn xem ví dụ 4 nhé :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .yellow{ awidth: 100px; height: 100px; background-color: yellow; } .blue{ awidth: 100px; height: 100px; background-color: blue; position: absolute; z-index: -1; margin-top: -50px; } </style> <body> <div class="yellow"> </div> <div class="blue"></div> </body> </html> |
Kết quả :
Vậy để xử lý vấn đề trên ta cho thuộc tính z-index có giá trị âm vào thẻ ‘blue’.
Nếu chưa hiểu rõ, các bạn có thể tham khảo các khóa học tại đây.
Chúc các bạn thành công !!!
