Thuộc tính CSS nào tạo bối cảnh xếp chồng?

Question

Tôi đang nghiên cứu về stacking contexts và thực hiện một số thử nghiệm với các thuộc tính tạo ngữ cảnh xếp chồng.

tôi đã làm một số xét nghiệm và phát hiện ra rằng, ngoài việc z-index, tất nhiên, các tính chất sau đây cũng tạo ra một bối cảnh xếp chồng:

• transform khác hơn none;
• opacity khác với 1;
• Và perspective.

Có các thuộc tính khác áp dụng ngữ cảnh xếp chồng không?

Answer 1

Một hoặc nhiều các tình huống sau sẽ gây ra một yếu tố để thành lập xếp chồng mình bối cảnh riêng cho hậu duệ của nó:

• Phần tử gốc luôn giữ một bối cảnh xếp chồng gốc. Đây là lý do tại sao bạn có thể bắt đầu sắp xếp các phần tử mà không cần phải định vị phần tử gốc trước tiên. Bất kỳ phần tử nào chưa tham gia vào một bối cảnh xếp chồng cục bộ (được tạo bởi bất kỳ kịch bản nào khác bên dưới) sẽ tham gia vào bối cảnh xếp chồng gốc thay thế.

• Đặt z-index thành bất kỳ mục nào khác ngoài auto trên một phần tử được định vị (tức là phần tử có position không phải là static).

  • Lưu ý rằng hành vi này được dự kiến ​​sẽ được thay đổi cho các yếu tố với position: fixed như rằng họ sẽ luôn luôn thiết lập ngữ cảnh xếp chồng bất kể giá trị z-index của họ. Một số trình duyệt đã bắt đầu áp dụng hành vi này, tuy nhiên thay đổi chưa được phản ánh trong CSS2.1 hoặc mới CSS Positioned Layout Module, vì vậy, có thể không nên dựa vào hành vi này ngay bây giờ.

    Thay đổi hành vi này được khám phá trong another answer of mine, thay vào đó liên kết đến this article và this set of CSSWG telecon minutes.

  • Ngoại lệ khác cho điều này là với . Thiết lập z-index trên một mặt hàng flex sẽ luôn luôn gây ra nó để thiết lập một bối cảnh xếp chồng ngay cả khi nó không được định vị.

• Đặt opacity thành bất kỳ thứ gì nhỏ hơn 1.

• Transforming các yếu tố:

  • Thiết transform để bất cứ điều gì khác hơn là none.

  • Đặt transform-style to preserve-3d.

  • Đặt perspective thành bất kỳ điều gì khác ngoài none.

• Tạo một CSS region: thiết flow-from để bất cứ điều gì khác hơn là none trên một yếu tố mà content là bất cứ điều gì khác hơn là normal.

• Trong paged media, mỗi page-margin box thiết lập bối cảnh xếp chồng của riêng nó.

• Trong filter effects, đặt filter thành bất kỳ điều gì khác ngoài none.

• Trong compositing and blending, đặt isolation to isolate.

• Trong will change, đặt will-change thành thuộc tính có giá trị không phải ban đầu sẽ tạo ngữ cảnh xếp chồng.

Lưu ý rằng block formatting context không giống như bối cảnh xếp chồng; trên thực tế, chúng là hai khái niệm hoàn toàn độc lập (mặc dù không loại trừ lẫn nhau).

---

_{này không bao gồm pseudo-ngữ cảnh xếp chồng, một thuật ngữ không chính thức mà chỉ đơn giản đề cập đến things that behave like independent stacking contexts liên quan đến vị trí với, nhưng thực sự tham gia vào bối cảnh cha mẹ xếp chồng của họ.}