Z-index trong CSS

Z-index trong CSS

Rate this post

Trong loạt bài này, tôi đã khám phá các giá trị CSS (và thuộc tính) khác nhau, mỗi giá trị bắt đầu bằng một chữ cái khác nhau trong bảng chữ cái. Chúng tôi biết rằng đôi khi truyền hình màn hình là không đủ, vì vậy trong bài viết này, chúng tôi đã thêm các mẹo nhanh về cách tận dụng chỉ số z-index.

Các bài viết liên quan:

Z-index là gì?

Thuộc tính z-index được sử dụng để dịch chuyển các phần tử trên trục z, tức là vào trong hoặc ra khỏi màn hình. Nó được sử dụng để xác định thứ tự của các phần tử nếu chúng chồng lên nhau.

Cú pháp:

z-index: auto | number | initial | inherit;

Value:

  • auto: Thứ tự ngăn xếp bằng thứ tự của cha (mặc định).
  • number: Thứ tự ngăn xếp phụ thuộc vào số lượng.
  • initial : Đặt giá trị này là mặc định.
  • inherit: Kế thừa giá trị của element parent.

Z là chỉ số z

z-index, nó là một thuộc tính được sử dụng để kiểm soát thứ tự của các element html trong tài liệu. Có một số phức tạp trong việc xếp chồng các element html nhưng nhìn chung, z-index khá hạn chế về các tính năng.

Z-index chỉ hoạt động cho các phần tử được positioned

Nếu bạn muốn kiểm soát thứ tự xếp chồng của các phần tử, bạn có thể làm như vậy với z-index. Nhưng chỉ số z sẽ chỉ ảnh hưởng nếu phần tử cũng có giá trị vị trí là absolute, relative  hoặc fixed.

Việc đặt các phần tử một cách chính xác với vị trí là một cách tuyệt vời để xây dựng các bố cục phức tạp hoặc các mẫu giao diện người dùng thú vị nhưng bạn thường muốn kiểm soát thứ tự xếp chồng mà không cần di chuyển phần tử khỏi vị trí ban đầu trên trang.

Nếu đúng như vậy, bạn chỉ có thể đặt position: relative nhưng không cung cấp bất kỳ giá trị nào cho top, right, bottom, left. Phần tử sẽ vẫn ở vị trí ban đầu trên trang, luồng tài liệu sẽ không bị gián đoạn và các giá trị z-index sẽ có hiệu lực.

Bạn có thể có chỉ số z âm

Các phần tử phân lớp thường được thực hiện để xây dựng các hình dạng phức tạp hoặc các thành phần giao diện người dùng. Điều này thường có nghĩa là các phần tử xếp lớp chồng lên nhau, với các giá trị ngày càng tăng của chỉ số z. Để đặt một phần tử trên một lớp bên dưới một lớp khác, nó chỉ cần có giá trị z-index thấp hơn nhưng giá trị thấp hơn đó có thể là số âm.

Một lĩnh vực mà điều này hữu ích là khi sử dụng các phần tử giả và muốn đặt chúng đằng sau nội dung của phần tử mẹ của chúng.

Do cách thức hoạt động của ngữ cảnh xếp chồng, giá trị âm của z-index là cần thiết trên bất kỳ phần tử nào: before hoặc: after nếu chúng được định vị phía sau nội dung văn bản của phần tử parent của chúng.

Khi xử lý z-index, không có gì lạ khi thấy mã như sau:

.layer{
  z-index:99999;
}

Điều này trông có vẻ khó hiểu. Việc nhìn thấy các giá trị như thế này thường là dấu hiệu của việc một nhà phát triển không hiểu ngữ cảnh xếp chồng và cố gắng buộc một lớp này nằm trên lớp khác.

Thay vì sử dụng các số tùy ý như 9999 hoặc 13 hoặc 11, chúng tôi có thể hệ thống hóa thang đo chỉ số z của mình và mang lại trật tự hơn một chút cho quy trình. 

Thay vì sử số tăng 1 cho z-index của mình, tôi sử dụng số tăng 100.

.layer-one {z-index: 100;}
.layer-two {z-index: 200;}
.layer-one {z-index: 300;}

Tôi làm điều này để giữ mọi thứ có tổ chức, nhưng cũng để ý đến nhiều lớp khác nhau đang được sử dụng trong suốt một dự án. Một lợi ích khác là nếu một lớp mới cần được thêm vào giữa hai lớp khác, thì có 99 giá trị tiềm năng để chọn ở giữa.

Leave a Reply