Podcast CSS - 019: z-index và bối cảnh xếp chồng
Giả sử bạn có một vài yếu tố được định vị tuyệt đối, và phải được đặt chồng lên nhau. Bạn có thể viết một chút về 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, cái nào sẽ xếp chồng lên nhau? Để biết mục nào sẽ làm việc đó, bạn cần hiểu ngữ cảnh chỉ mục z và bối cảnh xếp chồng.
Chỉ mục Z
z-index
đặt thứ tự lớp cho HTML một cách rõ ràng dựa trên không gian 3D của trình duyệt — trục Z.
Đây là trục cho biết lớp nào ở gần và 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 trong các phần tử
thì hành vi mặc định là thứ tự nguồn tài liệu sẽ quy định trục Z.
Điều này có nghĩa là các phần tử ở phía dưới tài liệu sẽ nằm phía trên các phần tử xuất hiện trước chúng.
Trong luồng bình thường,
nếu bạn đặt một giá trị cụ thể cho z-index nhưng 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 thường gặp khi mọi người gặp vấn đề với z-index.
Điều này không đúng nếu bạn đang ở trong bối cảnh hộp linh hoạt hoặc lưới
vì bạn có thể sửa đổi z-index 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 một giá trị âm cho z-index.
.my-element {
background: rgb(232 240 254 / 0.4);
}
.my-element .child {
position: relative;
z-index: -1;
}
Miễn là .my-element có giá trị ban đầu là z-index là auto,
thì phần tử .child sẽ nằm phía sau.
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);
}
Bởi vì .my-element hiện có giá trị position không phải là static
và giá trị z-index không phải là auto,
thao tác này đã tạo ra 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,
thì nó 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ó một thành phần mẹ chung và cùng nhau di chuyển lên và xuống trục z.
Trong ví dụ này,
phần tử mẹ đầu tiên có z-index là 1,
để 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 có 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,
z-index của tất cả phần tử con dựa trên giá trị 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 thành phần 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 một mã mới
ngữ cảnh xếp chồng.
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 tổng hợp mới
chẳng hạn 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 một trang web là một canvas. Trình duyệt sẽ lấy HTML và CSS của bạn rồi sử dụng chúng để xác định kích thước của canvas. Sau đó, trang sẽ được vẽ trên canvas này. Nếu một phần tử cần thay đổi, chẳng hạn như nó thay đổi vị trí—trình duyệt sau đó phải quay lại và tìm ra nội dung cần vẽ.
Để giúp cải thiện hiệu suất,
trình duyệt sẽ tạo các lớp tổng hợp mới được xếp chồng lên trên canvas.
Các tính năng này khá giống với ghi chú sau khi tạo:
việc di chuyển xung quanh và thay đổi không ảnh hưởng lớn đến canvas tổng thể.
Một lớp tổng hợp mới được tạo cho các phần tử có opacity,
transform và will-change vì những chỉ số này rất có khả năng thay đổi,
để trình duyệt đảm bảo rằng thay đổi có hiệu suất tốt 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 kiến thức
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.