Trong Chrome 22, hành vi bố cục của các phần tử position:fixed hơi khác so với các phiên bản trước. Tất cả các phần tử position:fixed hiện tạo thành ngữ cảnh xếp chồng mới. Thao tác này sẽ thay đổi thứ tự xếp chồng của một số trang, việc này có khả năng làm hỏng bố cục trang. Hành vi mới phù hợp với hành vi của trình duyệt WebKit trên thiết bị di động (iOS Safari và Chrome dành cho Android).
Kết hợp những gì?
Mọi người đều biết và yêu thích z-index trong việc xác định thứ tự theo chiều sâu của các phần tử trên trang. Tuy nhiên, không phải tất cả các chỉ mục z đều được tạo như nhau: z-index của một phần tử chỉ xác định thứ tự của phần tử đó so với các phần tử khác trong cùng ngữ cảnh xếp chồng. Hầu hết các phần tử trên trang đều ở trong một ngữ cảnh xếp chồng gốc, nhưng các phần tử có vị trí tuyệt đối hoặc tương đối có giá trị z-index không tự động lại tạo thành ngữ cảnh xếp chồng riêng (nghĩa là tất cả các phần tử con sẽ được sắp xếp theo thứ tự z bên trong phần tử mẹ và không bị xen kẽ với nội dung bên ngoài phần tử mẹ). Kể từ Chrome 22, các phần tử position:fixed cũng sẽ tạo ngữ cảnh xếp chồng riêng.
Để biết tổng quan chung về bối cảnh xếp chồng bài viết MDN này là tài liệu tuyệt vời.
So sánh position:fixed với thuộc tính vị trí mới:cố định: để tham khảo, position:sticky luôn tạo một ngữ cảnh xếp chồng mới.
Động lực
Các trình duyệt dành cho thiết bị di động (Mobile Safari, trình duyệt Android, trình duyệt dựa trên Qt) đặt các phần tử vị trí:cố định trong ngữ cảnh xếp chồng của riêng chúng và trong một thời gian (kể từ iOS5, Android Gingerbread, v.v.) vì nó cho phép một số tối ưu hóa cuộn, giúp trang web phản hồi nhanh hơn nhiều khi chạm vào. Thay đổi này được áp dụng cho máy tính vì 3 lý do:
- Hành vi hiển thị khác nhau trên trình duyệt "thiết bị di động" và "máy tính" là một trở ngại đối với các tác giả web; CSS nên hoạt động như nhau ở mọi nơi có thể.
- Với máy tính bảng, không rõ thuật toán tạo bối cảnh xếp chồng "thiết bị di động" hay "máy tính" nào là phù hợp hơn.
- Việc mang tính năng tối ưu hoá hiệu suất cuộn từ thiết bị di động sang máy tính là điều tốt cho cả người dùng và tác giả.
Thông tin cụ thể về thay đổi này
Dưới đây là ví dụ cho thấy các hành vi của bố cục: https://codepen.io/paulirish/pen/CgAof
Với thay đổi này, cả hai phiên bản sẽ hiển thị giống như phiên bản bên phải.
Trong ví dụ này, hộp màu xanh lục có z-index: 1, hộp màu hồng có z-index: 3 và hộp màu cam có z-index: 2. Hộp màu xanh dương là đối tượng cấp trên của hộp màu cam và có position:fixed.
Nếu hộp màu xanh dương có ngữ cảnh xếp chồng riêng, thì z-index của hộp màu cam sẽ được tính tương ứng với ngữ cảnh xếp chồng của hộp màu xanh dương. Vì hộp màu xanh dương có z-index là auto, mang lại mức độ xếp chồng bằng 0 trong ngữ cảnh xếp chồng gốc, điều này có nghĩa là hộp màu cam sẽ nằm phía sau các hộp màu xanh lục và màu hồng, có chỉ mục z là 1 và 3 (tương ứng) trong ngữ cảnh gốc.
Nếu hộp màu xanh dương không có ngữ cảnh xếp chồng riêng, thì z-index của hộp màu cam sẽ được tính tương ứng với ngữ cảnh xếp chồng gốc (cùng với các hộp màu xanh lục và màu hồng). Do đó, hộp màu cam sẽ nằm xen kẽ với các hộp màu hồng và màu xanh lục.
Để biết thêm thông tin chi tiết về tiêu chí tạo bối cảnh xếp chồng (và cách hoạt động chung của ngữ cảnh xếp chồng), hãy tham khảo lại bài viết này về MDN. Trong ví dụ này, phiên bản bên phải luôn sử dụng bối cảnh xếp chồng cho hộp màu xanh dương vì độ mờ của nó nhỏ hơn 1. Việc thay đổi hành vi đang được thực hiện hiệu quả sẽ thêm một tiêu chí khác để tạo ngữ cảnh xếp chồng riêng biệt, cụ thể là phần tử vị trí:cố định.
Thử nghiệm và tương lai
Để kiểm tra xem trang của bạn có sắp thay đổi hay không, hãy chuyển đến about:flags của Chrome rồi bật/tắt "các phần tử vị trí cố định tạo ngữ cảnh xếp chồng". Nếu bố cục của bạn hoạt động giống nhau trong cả hai trường hợp, thì bạn đã thiết lập xong. Nếu không, hãy đảm bảo cờ này được chấp nhận với bạn vì đó sẽ là chế độ mặc định trong Chrome 22.
Thay đổi này sẽ loại bỏ một chức năng, đó là khả năng xen kẽ nội dung trong một cây con Position:Fixed với nội dung không cuộn từ bên ngoài. Ít có nhà phát triển web nào đang cố ý làm việc này và có thể tạo ra hiệu ứng tương tự bằng cách cung cấp nhiều phần tử vị trí:cố định cho các phần khác nhau của DOM. Ví dụ: hãy xem xét hai ví dụ sau:
https://codepen.io/wiltzius/pen/gcjCk
Trang này cố gắng lấy hai div con (overlayA và lớp phủ B) của một phần tử vị trí cố định và đặt một div lên phía trên một div nội dung riêng biệt và một div ở dưới div nội dung riêng biệt đó. Hiện tại, bạn không thể thực hiện việc này vì phần tử vị trí cố định là ngữ cảnh xếp chồng riêng và phần tử này (cùng với tất cả các phần tử con) sẽ nằm hoàn toàn ở trên hoặc dưới toàn bộ div nội dung. Lưu ý: ví dụ này không còn hoạt động trong Chrome 2. Phiên bản 2.2 và Chrome 2
Để khắc phục vấn đề này, bạn có thể chia hai lớp phủ thành các phần tử Position:cố định riêng của chúng. Mỗi ngữ cảnh có bối cảnh xếp chồng riêng, một trong số đó có thể nằm trên div nội dung và một trong số đó có thể nằm dưới div nội dung. Hãy xem ví dụ khắc phục hoạt động trong Chrome 21 và 22:
https://codepen.io/wiltzius/pen/vhFzG
Nguồn gốc của ví dụ này thuộc về hixie không thể bắt chước được.
Chrome là trình duyệt đầu tiên dành cho máy tính tạo các phần tử vị trí cố định để tạo ngữ cảnh xếp chồng riêng. Tiêu chuẩn liên quan là quy cách CSS z-index (ví dụ: https://www.w3.org/TR/CSS21/zindex.html). Hiện chưa có sự đồng thuận về việc cần làm về sự khác biệt giữa trình duyệt dành cho thiết bị di động và trình duyệt dành cho máy tính. Tuy nhiên, do nhầm lẫn về việc có hai hành vi khác nhau trên thiết bị di động và máy tính để bàn, Chrome hiện đã chọn chuyển sang hành vi duy nhất này trên cả hai nền tảng.
Cập nhật ngày 1 tháng 10 năm 2012: Phiên bản gốc của bài viết này cho thấy rằng thông số kỹ thuật z-index của CSS đã được thay đổi để phản ánh hành vi mới của vị trí: phần tử cố định. Điều này không chính xác; nó đã được thảo luận trong danh sách kiểu www nhưng hiện chưa có thay đổi nào được đưa vào quy cách.