Podcast CSS – 019: z-index và bối cảnh xếp chồng
Giả sử bạn có một vài phần tử có vị trí tuyệt đối và đáng lẽ phải nằm chồng lên nhau. Bạn có thể viết một chút HTML như sau:
<div class="stacked-items">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
</div>
Nhưng theo mặc định, quảng cáo nào được xếp chồng lên nhau? Để biết mục nào sẽ làm điều đó, bạn cần hiểu chỉ mục z và ngữ cảnh xếp chồng.
Chỉ mục Z
Thuộc tính z-index đặt rõ ràng thứ tự lớp cho HTML dựa trên không gian 3D của trình duyệt — trục Z.
Đây là trục cho thấy lớp nào ở gần bạn hơn và cách xa bạn hơn.
Trục tung trên web là trục Y và trục hoành là trục X.
Thuộc tính z-index chấp nhận một giá trị số có thể là số dương hoặc số âm.
Các phần tử sẽ xuất hiện phía trên một phần tử khác nếu có giá trị z-index cao hơn.
Nếu bạn không đặt z-index trên các phần tử, thì hành vi mặc định là thứ tự nguồn tài liệu sẽ chỉ định trục Z.
Điều này có nghĩa là các thành phần ở phía dưới tài liệu sẽ nằm phía trên các thành phần xuất hiện trước chúng.
Trong quy trình thông thường, nếu bạn đặt một giá trị cụ thể cho z-index và giá trị này không hoạt động, bạn cần đặt giá trị position của phần tử thành bất kỳ giá trị nào khác ngoài static.
Đây là địa điểm phổ biến mà mọi người gặp khó khăn với z-index.
Tuy nhiên, điều này sẽ không xảy ra nếu bạn đang sử dụng ngữ cảnh flexbox hoặc lưới, vì bạn có thể sửa đổi chỉ mục z của các mục linh hoạt hoặc lưới mà không cần thêm position: relative.
Chỉ mục z âm
Để đặt một phần tử phía sau một phần tử khác, hãy thêm giá trị âm cho z-index.
.my-element {
background: rgb(232 240 254 / 0.4);
}
.my-element .child {
position: relative;
z-index: -1;
}
Chỉ cần .my-element có giá trị ban đầu cho z-index là auto, thì phần tử .child sẽ đứng sau phần tử đó.
Thêm CSS sau vào .my-element và phần tử .child sẽ không nằm phía sau.
.my-element {
position: relative;
z-index: 0;
background: rgb(232 240 254 / 0.4);
}
Vì .my-element hiện có giá trị position không phải là static
và giá trị z-index không phải auto,
nên giá trị này đã tạo một ngữ cảnh xếp chồng mới.
Điều này có nghĩa là ngay cả khi bạn đặt .child để có z-index là -999, lớp này vẫn sẽ không nằm phía sau .my-parent.
Ngữ cảnh xếp chồng
Ngữ cảnh xếp chồng là một nhóm các phần tử có cùng một phần tử mẹ, đồng thời di chuyển lên và xuống trên trục z.
Trong ví dụ này, phần tử mẹ đầu tiên có z-index là 1, do đó, hãy tạo một ngữ cảnh xếp chồng mới.
Phần tử con của thành phần này có z-index là 999.
Bên cạnh phần tử mẹ này, có một phần tử mẹ khác với một phần tử con.
Phần tử mẹ có z-index là 2 và phần tử con cũng có z-index là 2.
Vì cả hai phần tử mẹ đều tạo ngữ cảnh xếp chồng, nên z-index của tất cả phần tử con đều dựa trên bối cảnh của phần tử mẹ.
z-index của các phần tử bên trong ngữ cảnh xếp chồng luôn tương ứng với thứ tự hiện tại của phần tử mẹ trong ngữ cảnh xếp chồng riêng.
Tạo ngữ cảnh xếp chồng
Bạn không cần áp dụng z-index và position để tạo ngữ cảnh xếp chồng mới.
Bạn có thể tạo ngữ cảnh xếp chồng mới bằng cách thêm giá trị cho các thuộc tính tạo lớp kết hợp mới như opacity, will-change và transform.
Bạn có thể
xem danh sách đầy đủ các cơ sở lưu trú tại đây.
Để giải thích lớp tổng hợp là gì, hãy tưởng tượng trang web là một canvas. Một trình duyệt sẽ sử dụng HTML và CSS của bạn rồi sử dụng chúng để xác định kích thước tạo canvas. Sau đó, công cụ này sẽ vẽ trang trên canvas này. Nếu một phần tử thay đổi (chẳng hạn như phần tử đó thay đổi vị trí), thì trình duyệt sẽ phải quay lại và chỉnh sửa lại nội dung cần vẽ.
Để giúp nâng cao hiệu suất, trình duyệt tạo các lớp tổng hợp mới được xếp chồng trên canvas.
Những nội dung này khá giống với ghi chú sau khi ghi chú:
di chuyển một bản nhạc xung quanh và thay đổi nó không có ảnh hưởng lớn đến canvas tổng thể.
Một lớp kết hợp mới được tạo cho các phần tử có opacity, transform và will-change vì các phần tử này rất có thể sẽ thay đổi, vì vậy, trình duyệt sẽ đảm bảo sự thay đổi đó sẽ hiệu quả nhất có thể bằng cách sử dụng GPU để áp dụng các điều chỉnh kiểu.
Tài nguyên
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về chỉ mục z
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
Bài viết nào ở trên cùng theo mặc định?
Nếu chỉ mục z không hoạt động, bạn nên kiểm tra thuộc tính nào trên phần tử của mình?
displayrelativepositionstatic.animationHộp linh hoạt và lưới có cần position: relative không?
position: relative.