Xếp chồng css không có chỉ mục z

// css, to put the heading into a separate stacking context
.heading-wrapper {
  isolation: isolate;
}

for Modal

Nếu chúng ta sử dụng các thư viện thành phần giao diện người dùng như Reach-UI, thì DOM của phương thức thường được chèn bên dưới phần tử gốc, nếu sử dụng React. Mặc dù tất cả các phần tử khác trong ứng dụng rất có thể được hiển thị bên trong phần tử gốc, nhưng Phương thức được hiển thị bên dưới thường xuất hiện ở đầu trang khi được gọi là mở — nếu không có z-index nào khác cao hơn trong ngữ cảnh xếp chồng

Để tránh các lỗi có thể xảy ra trong tương lai, tốt nhất là đặt toàn bộ phần tử gốc vào một bối cảnh xếp chồng riêng biệt bằng cách cho nó

#root{
  isolation:isolate;
}

1. Bằng cách đó, z-index bên trong các phần tử trong phần tử gốc sẽ không can thiệp vào Modal. Modal sẽ luôn xuất hiện trên cùng mà không có bất kỳ yếu tố nào vô tình chảy qua

Vài tuần trước, tôi đã tổ chức một hội thảo cho các đồng nghiệp của mình liên quan đến ngữ cảnh xếp chồng và chỉ mục z, vì vậy tôi cũng quyết định viết về nó ở đây - như một lời nhắc nhở đẹp đẽ. D

Okey dokey, vì vậy. khi một trang web được tải, trước tiên trình duyệt sẽ đọc văn bản HTML và xây dựng Mô hình đối tượng tài liệu (DOM) từ đó. Sau đó, nó xử lý CSS và xây dựng Mô hình đối tượng CSS (CSSOM) từ nó. Khi bạn kết hợp DOM và CSSOM, bạn sẽ có một cây kết xuất. Khi cây kết xuất được tạo, trình duyệt bắt đầu in các thành phần trên màn hình theo cách chúng xuất hiện trong HTML.  

Mọi phần tử trong tài liệu HTML có thể ở trước hoặc sau mọi phần tử khác trong tài liệu. Điều này được gọi là thứ tự xếp chồng. Khi các thuộc tính vị trí và chỉ số z không liên quan, các quy tắc rất đơn giản. thứ tự xếp chồng giống như thứ tự xuất hiện trong HTML. Đây được gọi là thứ tự xếp chồng tự nhiên

Ở đây chúng ta có thể thấy ba div không có chỉ mục z và vị trí được áp dụng. Chúng được hiển thị trên trang theo thứ tự xuất hiện trong HTML

Chúng ta có thể thay đổi thứ tự xếp chồng bằng cách thêm thuộc tính vị trí. Mọi phần tử được định vị (và phần tử con của chúng) được hiển thị trước bất kỳ phần tử không được định vị nào. Các phần tử được định vị có giá trị vị trí tương đối, tuyệt đối, cố định hoặc cố định. Các phần tử không được định vị là những phần tử có vị trí mặc định (tĩnh)

Div màu đỏ tươi có một vị trí tương đối vì vậy nó hiện ở phía trước div màu lục lam và màu vàng không được định vị

Sẽ phức tạp hơn một chút khi chúng ta thêm chỉ mục z. chỉ mục z chỉ hoạt động trên các phần tử được định vị. Nếu bạn cố gắng đặt chỉ mục z trên phần tử không được định vị, nó sẽ không làm được gì.  

chỉ mục z được thêm vào div màu vàng không được định vị, nhưng nó vẫn nằm dưới div màu đỏ tươi (có vị trí tương đối và không có chỉ mục z) do chỉ mục z không hoạt động trên các phần tử không được định vị

Tuy nhiên, có một ngoại lệ - con flex có thể sử dụng chỉ mục z ngay cả khi chúng không được định vị

Nếu chúng ta thêm màn hình. flex trên cha của chúng, div màu vàng không được định vị với chỉ mục z sẽ xuất hiện trước div màu đỏ tươi được định vị

Các phần tử có chỉ số z lớn hơn sẽ xuất hiện trước các phần tử có chỉ số z thấp hơn và nếu phần tử có chỉ số z âm, nó sẽ xuất hiện phía sau các phần tử không được định vị

Tất cả các div đều có vị trí tương đối và chỉ mục z. Div màu lục lam có giá trị chỉ số z lớn nhất nên nó ở trước 2 cái còn lại, sau đó đến div màu đỏ tươi và sau đó là màu vàng vì nó có giá trị chỉ số z thấp nhất

Bằng cách thêm chỉ mục z vào các phần tử được định vị, chúng tôi tạo ngữ cảnh xếp chồng. Bối cảnh xếp chồng là một nhóm các phần tử có cha chung di chuyển tiến hoặc lùi cùng nhau theo thứ tự xếp chồng. Mỗi bối cảnh xếp chồng có một phần tử HTML duy nhất làm phần tử gốc của nó. Bối cảnh xếp chồng giới hạn tất cả các phần tử con của nó ở một vị trí cụ thể theo thứ tự xếp chồng, điều đó có nghĩa là nếu một phần tử được chứa trong ngữ cảnh xếp chồng ở dưới cùng của thứ tự xếp chồng, thì không có cách nào để nó xuất hiện trước phần tử khác .  

Div màu đỏ tươi và màu vàng đều có vị trí tương đối và có một số giá trị chỉ số z. Phần tử bên trong div màu đỏ tươi có chỉ số z lớn hơn nhưng nó xuất hiện phía sau div màu vàng. Nó là một phần của bối cảnh xếp chồng được tạo bởi div màu đỏ tươi đằng sau div màu vàng. giá trị chỉ mục z chỉ được so sánh với các phần tử khác trong cùng ngữ cảnh và giá trị chỉ mục z không phải là toàn cầu

Bạn có thể sử dụng chỉ mục Z mà không có vị trí tuyệt đối không?

Chỉ số Z có hoạt động đối với một phần tử không có vị trí không?

Chỉ số Z có phải là một thực hành tốt không?