CSS 19 – Thuộc tính z-index trong CSS

0
130

Khái niệm z-index

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. Giá trị tốt nhất là không sử dụng đơn vị.

Chú ý: z-index chỉ làm việc cùng với thuộc tính position.

Cấu trúc

Với các giá trị như sau:

Giá trị Ví dụ Mô tả
auto z-index: auto; Tự động sắp xếp thứ tự chồng nhau cho thành phần, đây là dạng mặc định.
Giá trị z-index: 10; Sắp xếp thứ tự chồng nhau cho thành phần theo giá trị.
inherit z-index: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

Cho 1 đoạn HTML gồm 2 thành phần với id lần lượt là div1 và div 2, như sau:

CSS cho các thành phần div1 và div2:

Hiển thị trình duyệt khi chưa có thuộc tính z-index:

Theo mặc định, thành phần nào có code nằm sau sẽ có thứ tự nằm trên, như thành phần 02 trong ví dụ.

Thêm thuộc tính z-index vào CSS: muốn cho thành phần 1 nằm trên thành phần 2, cho chỉ số z-index của div1 cao hơn div2, như sau:

Sử dụng z-index: 1; cho thành phần 01, lập tức thành phần 01 đước sắp xếp nằm trên. Thành phần 2 mặc định không viết thì z-index là 0.

Kết quả:

Kết luận

Vậy là mình đã giới thiệu xong các trường hợp thường được sử dụng của z-index trong CSS. Qua bài này bạn phải hiểu được các ví dụ đó.

Chúc các bạn học tập tốt!

 

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây