Thuộc tính Z-Index trong CSS

Hôm nay mình sẽ giới thiệu với các bạn về z-index trong CSS.
Để tìm hiểu về Thuộc tính Z-index, mình xin đưa ra ví dụ về việc sử dụng CSS absolute position để xếp chồng các thành phần lên nhau:

Với giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
z-index 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ụ: Sử dụng thuộc tính Z-index trong CSS:

–         Trong file: bai1html.html ta gõ như sau:

–         Trong file: style.css ta định dạng sau:

–         Kết quả:

Thuộc tính z index trong CSS

Thuộc tính z index trong CSS

Chúc các bạn thành công!