CSS Z-Index - Ook-code

Trang chủ » Cách Sử Dụng Z Index Trong Css » CSS Z-Index - Ook-code

Có thể bạn quan tâm

Thuộc tính z-index trong css

Thuộc tính z-index quy định cụ thể trình tự sắp xếp và hiển thị của một phần tử HTML.

CSS Z-Index

Khi các phần tử được định vị bởi các thuộc tính position, chúng có thể xếp chồng lên các phần tử khác.

Thuộc tính z-index xác định thứ tự xếp chồng lên nhau của các phần tử (phần từ có z-index lớn hơn sẽ xếp lên trên cùng).

Thuộc tính z-index có thể nhận giá trị âm hoặc dương.

css z-index Vì hình ảnh có z-index là -1, nên nó nằm phía sau văn bản

Ví dụ

<style> img { position: absolute; left: 0px; top: 0px; z-index: -1; } </style>

Xem kết quả

Lưu ý: z-index chỉ hoạt động trên các phần tử được định vị (vị trí: tuyệt đối absolute, vị trí: tương đối relative, vị trí: cố định fixed hoặc vị trí: dính sticky)

Một số ví dụ về Z-Index

Phần tử có giá trị thuộc tính z-index lớn hơn luôn xếp trên phần tử có giá trị thuộc tính z-index nhỏ hơn.

Ví dụ

<style> .container { position: relative; } .black-box { position: relative; z-index: 1; border: 2px solid black; height: 100px; margin: 30px; } .gray-box { position: absolute; z-index: 3; /* gray box sẽ xếp trên both green và black box */ background: lightgray; height: 60px; width: 70%; left: 50px; top: 50px; } .green-box { position: absolute; z-index: 2; /* green box sẽ xếp trên black box */ background: lightgreen; width: 35%; left: 270px; top: -15px; height: 100px; } </style>

Xem kết quả

Nếu hai phần tử được định vị xếp chồng lên nhau mà không có giá trị thuộc tính z-index được chỉ định, phần tử được xác định cuối cùng trong mã HTML sẽ được hiển thị ở trên cùng.

Ví dụ

<style> .container { position: relative; } .black-box { position: relative; border: 2px solid black; height: 100px; margin: 30px; } .gray-box { position: absolute; background: lightgray; height: 60px; width: 70%; left: 50px; top: 50px; } .green-box { position: absolute; background: lightgreen; width: 35%; left: 270px; top: -15px; height: 100px; } </style>

Xem kết quả

Từ khóa » Cách Sử Dụng Z Index Trong Css