z-index trong css có cách thức hoạt động là mọi phần tử trên trang web được hiển thị theo chiều ngang dọc theo trục x và y, hiển thị thứ tự trùng lặp trên trục z. Nói một cách đơn giản, chỉ số z càng cao thì thứ hạng phần tử càng cao.
Ví dụ về chỉ số z và vị trí
Chúng ta có 3 khối, xám, xanh dương, vàng, tất cả được gắn trực tiếp vào một div có lớp topdev-demo. Điều này cho phép 3 khối thuộc cùng một bối cảnh ngăn xếp. Vì vậy, trong cùng một bối cảnh xếp chồng, thứ tự từ trên xuống dưới sẽ tuân theo quy tắc này: phần tử có chỉ số z cao nhất sẽ ở trên cùng. Nếu không có phần tử nào được lập chỉ mục z, thứ tự sẽ được xác định theo thứ tự chúng xuất hiện trong cây dom từ trước ra sau.
Kết quả:
Hãy thử thêm chỉ mục z vào 3 khối sao cho khối màu xám xuất hiện ở phía trước, khối màu xanh ở giữa và khối màu vàng ở phía sau 2 khối còn lại. Tuy nhiên, bạn cần lưu ý rằng chỉ số z chỉ áp dụng cho các phần tử nếu bạn chỉ định 3 giá trị tuyệt đối, cố định hoặc tương đối còn lại.
Kết quả:
Điều này đủ để cung cấp cho bạn ý tưởng về thuộc tính z-index trong css trong mã của bạn. Nếu bạn muốn biết thêm, xin vui lòng đọc tiếp.
Xem công việc lập trình viên css được trả lương cao của topdev.
Thứ tự sắp xếp
Đây là một trong những vấn đề với chỉ mục z: nó đơn giản đến mức hầu hết các nhà phát triển không dành thời gian để đọc các quy tắc của nó.
Mỗi phần tử trong
html có thể được đặt trước hoặc sau các phần tử khác trong tài liệu. Đây được gọi là thứ tự xếp chồng (thứ tự xếp chồng).
Trước hết, bất kể thuộc tính z-index và vị trí, chỉ có một quy tắc rất đơn giản: thứ tự của các lớp là thứ tự chúng xuất hiện trong html
Thứ hai, khi các thuộc tính vị trí được xem xét, mỗi phần tử được gán một vị trí (và các phần tử con của nó) xuất hiện trước phần tử bất kỳ không có vị trí (ví dụ: các thuộc tính sau của chỉ mục z hoạt động: tuyệt đối, cố định hoặc tương đối)
Đối với
thứ ba, chúng ta có thể nghĩ rằng các phần tử có giá trị chỉ số z cao sẽ được xếp hạng trước các phần tử có giá trị chỉ số z thấp. Nghe có vẻ đơn giản, nhưng thực ra có nhiều quy tắc hơn:
- z-index chỉ hoạt động trên các phần tử được gán một vị trí.
- z-index có thể tạo bối cảnh xếp chồng.
- Khi một phần tử là gốc của tài liệu (thẻ )
- Khi giá trị vị trí của một phần tử không tĩnh và chỉ số z của nó không tự động
- Khi giá trị độ mờ của phần tử nhỏ hơn 1
- Tại sao api facebook bắt đầu bằng vòng lặp for?
- Cách thiết lập dự án symfony để sử dụng tên miền phụ docker
- API RESTful là gì? Cách thiết kế API an toàn
Xếp chồng ngữ cảnh
Một nhóm các phần tử có chung cha sẽ di chuyển cùng nhau theo thứ tự xếp chồng, tạo ra một khái niệm gọi là ngữ cảnh xếp chồng. Hiểu bối cảnh xếp chồng là chìa khóa để hiểu đầy đủ cách hoạt động của chỉ mục z và thứ tự xếp chồng.
Mỗi ngữ cảnh xếp chồng có 1 phần tử html, là phần tử gốc. Khi ngữ cảnh xếp chồng được gắn vào một phần tử, nó sẽ liên kết tất cả các phần tử con với một vị trí cố định trong thứ tự xếp chồng. Điều này có nghĩa là nếu một phần tử nằm trong ngữ cảnh xếp chồng ở cuối thứ tự xếp chồng, thì không có cách nào để nó xuất hiện ngay trước một phần tử trong ngữ cảnh xếp chồng cao hơn theo thứ tự xếp chồng. Mặc dù chỉ số z của nó được đặt thành 9999!
Ngữ cảnh xếp chồng có thể được gắn vào một phần tử theo một trong ba cách sau:
Cập nhật: Ngoài độ mờ, một số thuộc tính css mới hiện cũng tạo ngữ cảnh xếp chồng. Chúng bao gồm các hiệu ứng chuyển tiếp, bộ lọc, vùng css, phương tiện được phân trang… Theo nguyên tắc chung, nếu thuộc tính css cần được hiển thị trong ngữ cảnh ngoài màn hình, nó sẽ tạo ngữ cảnh xếp chồng mới.
kết thúc chỉ mục z trong css
z-index là một tính năng thường khiến các nhà phát triển mới làm quen với CSS phải đau đầu. Tuy nhiên, nếu bạn nắm vững về stacking order , stacking context , position và các thuộc tính có thể làm cho stacking context “open branch” như opacity , thì sau này sẽ dễ viết mã hơn. Nhưng tốt nhất là luyện trí nhớ trong khi đọc, nếu không bạn sẽ chết não.
Có thể bạn muốn xem thêm: