Chỉ số Z hoạt động như thế nào trong CSS?

Trước khi tôi bắt đầu giải thích, hãy để tôi lưu ý rằng z-index chỉ có ảnh hưởng nếu phần tử có giá trị hiển thị là position:relative, position:absolute hoặc position:fixed (KHÔNG phải là

0) bởi vì mỗi phần tử này làm cho nó có ngữ cảnh xếp chồng riêng. Điều đó có nghĩa là các giá trị như

1 hoặc

2 có thể hoạt động hoặc không hoạt động tùy thuộc vào tình huống

Cũng lưu ý rằng trong bài đăng này tôi sẽ sử dụng định dạng 1. 1. 1 để biểu thị rằng tôi đang chọn con đầu tiên của phần tử con đầu tiên. 2. 1. 1 sẽ là con đầu tiên của phần tử con đầu tiên của phần tử thứ hai, v.v.

---

Tôi nghĩ rằng z-index được giải thích tốt nhất với sự tương tự bằng cách sử dụng danh sách phụ. Hãy bắt đầu với ví dụ đơn giản nhất

Chúng ta có thể biểu diễn điều này dưới dạng một danh sách như vậy

1. cấp cao nhất
2. Anh chị em cấp cao nhất

Bây giờ, theo mặc định, những cái tiếp theo trong danh sách sẽ hiển thị trên đầu những cái trước nó. Vì vậy, trong trường hợp này, 2 sẽ được định vị trên đầu trang của 1

---

Điều mà chỉ mục z cho phép chúng tôi thực hiện về cơ bản là sắp xếp lại danh sách này (trong một số giới hạn). Chỉ số z càng cao, phần tử của chúng ta càng ở phía dưới danh sách

Tôi sẽ sử dụng CSS nội tuyến ở đây để hiển thị dễ dàng nhưng bạn chắc chắn nên tránh CSS nội tuyến trong mã sản xuất

Điều này bây giờ thay đổi danh sách phụ của chúng tôi để trông như thế này

1. Anh chị em cấp cao nhất
2. Cấp cao nhất - chỉ mục z. 1

Tuyệt vời. Bây giờ, phần tử đầu tiên trong HTML của chúng tôi sẽ hiển thị trên phần tử thứ hai của chúng tôi

---

Điều này trở nên phức tạp hơn khi chúng ta xử lý các phần tử con (được lồng vào nhau)

Một cách dễ dàng hơn để nghĩ về tình huống này là nghĩ rằng khi một phần tử bắt đầu được hiển thị, nó sẽ hiển thị tất cả phần tử con của phần tử đó trước khi chuyển sang bất kỳ phần tử anh chị em nào

Ngoài ra, hãy nhớ rằng các danh sách con không thể thay đổi cấp độ, nghĩa là chúng không thể ở cùng cấp độ với các phần tử cha hoặc con của chúng

Điều đó có nghĩa là nếu chúng ta có những điều sau đây

Danh sách phụ kết xuất của chúng tôi sẽ giống như sau

1. cấp cao nhất
2. Anh chị em cấp cao nhất

Vì vậy, chúng tôi xem cấp cao nhất của mình và xem cấp nào ở cuối danh sách. Trong trường hợp này, 2. 0 là, vì vậy nó sẽ ở trên cùng của 1. 0. Sau đó, chúng tôi xem liệu nó có bất kỳ danh sách con nào không (trẻ em). Nó không, vì vậy chúng tôi đi đến 1. 0

1. 0 có con, 1. 1, sẽ trực quan trên 1. 0 (giống như nếu chúng ta không cho nó chỉ số z), nhưng nó sẽ vẫn ở dưới 2. 0 vì 1. 0 dưới 2. 0

Do đó, chỉ số z ở đây không giúp ích gì cho chúng tôi vì 1. 1 không có anh chị em

---

Hãy lấy một ví dụ phức tạp hơn một chút

Danh sách phụ cho ví dụ này là gì?

Tôi sẽ đưa nó cho bạn, nhưng thật tốt khi thử và tự làm

1. cấp cao nhất
   1. Anh em cấp dưới
   2. Anh chị em cấp phụ - z-index1
   3. Cấp phụ - z-index2
2. Anh chị em cấp cao nhất

Do đó, xét về thứ tự trực quan từ trên xuống dưới, thứ tự đi 2. 1, 2. 0, 1. 3, 1. 2. 1. 1, 1. 0

Điều đó không tệ lắm phải không?

Hành vi này là đúng cho dù có bao nhiêu anh chị em ở đó.

---

Ngoại lệ duy nhất đối với quy tắc con cái được xếp trên cha mẹ là khi con cái có z-index tiêu cực. Khi chỉ mục z âm được đưa ra, nó sẽ tự đặt bên dưới phần tử cha

Vì vậy, nếu chúng ta có những điều sau đây

Cây danh sách phụ sẽ trông như thế này

1. Cấp phụ - z-index-1
2. Anh chị em cấp cao nhất

Và phân lớp từ trên xuống dưới sẽ là 2. 0, 1. 0, 1. 1

Một ví dụ phức tạp hơn một chút

________số 8_______

Danh sách đại diện

1. Cấp phụ - z-index-1
2. Anh chị em cấp cao nhất

Nhưng bạn nên tránh những z-index tiêu cực. Nếu bạn nghĩ rằng bạn cần chúng thì có khả năng HTML của bạn được cấu trúc không đúng cách

---

Đó là về nó. Nếu bạn vẫn muốn tìm hiểu thêm, đọc luôn tốt

Hãy nhớ rằng các thuộc tính khác, bao gồm nhưng không giới hạn ở

6,

7 và

8, tạo ngữ cảnh xếp chồng của riêng chúng và có thể ảnh hưởng đến thứ tự hiển thị của các phần tử

---

6 hoạt động tương tự như z-index - một con chỉ có thể mờ như cha của nó - nhưng nó không thể có giá trị âm

Điều khó khăn về z-index là nó chỉ hoạt động trong ngữ cảnh xếp chồng của một phần tử. Trong trường hợp của chúng tôi, chúng tôi muốn con vịt, một phần của bối cảnh xếp chồng vòng màu đỏ, ở phía trước con cá (Một bối cảnh xếp chồng khác). Điều này là không thể

Để làm cho con vịt xuất hiện trước mặt con cá, chúng ta cần xóa ngữ cảnh xếp chồng khỏi vòng màu đỏ

.fish {
  position: relative;
  z-index: 2;
}

.duck {
  position: relative;
  z-index: 1;
}

.ring-red {
  position: static;
  z-index: auto;
}

Bằng cách này, ngữ cảnh xếp chồng hiện tại cho con vịt và con cá là phần tử nước

Chỉ số Z 9999 trong CSS là gì?

Chỉ số Z 1000 trong CSS là gì?

Z Index 0 có nghĩa là gì trong CSS?

Chỉ mục Z có được kế thừa CSS không?