Vài điều về z-index trong css – TopDev

chỉ mục z trong css hoạt động theo cách mà 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, với thứ tự lặp lại 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.

z-index và vị trí ví dụ

Chúng tôi có 3 khối, xám, xanh lam, vàng, tất cả được gắn trực tiếp vào một div với lớp topdev-demo. Điều này cho phép 3 khối thuộc cùng một ngữ cảnh ngăn xếp. Do đó, 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 sau: 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ì thứ tự được xác định theo thứ tự mà 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 để Hình vuông màu xám xuất hiện phía trước, hình vuông màu xanh lam xuất hiện ở giữa và hình vuông màu vàng xuất hiện phía sau 2 hình vuông 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 là đủ để cung cấp cho bạn ý tưởng về các thuộc tính chỉ mục z trong css trong mã của bạn. Nếu bạn muốn biết thêm, hãy đọc tiếp.

Kiểm tra các công việc lập trình viên css trả lương cao topdev.

xắp xếp

Đó là một trong những vấn đề với z-index: 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 thành phần 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 xem xét thuộc tính vị trí, mỗi phần tử được gán một vị trí (và 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: tuyệt đối, cố định hoặc tương đối)

vì

Thứ ba, chúng ta có thể nghĩ rằng các phần tử có chỉ số z cao sẽ được xếp hạng trước các phần tử có chỉ số z thấp. Nghe có vẻ đơn giản, nhưng có nhiều quy tắc hơn:

• chỉ mục z chỉ áp dụng cho các phần tử có vị trí được chỉ định.
• z-index có thể tạo bối cảnh xếp chồng.

xếp chồng bối cảnh

Một nhóm các phần tử có chung cha mẹ 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à bối 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 bối 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ử ở cuối thứ tự xếp chồng trong ngữ cảnh xếp chồng, thì nó không thể xuất hiện ngay trước một phần tử trong ngữ cảnh xếp chồng có thứ tự xếp chồng cao hơn. Ngay cả khi chỉ số z của nó được đặt thành 9999!

Một bối 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:

• Khi một phần tử là gốc 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

thay mới: Ngoài độ mờ, một số thuộc tính css mới hiện cũng tạo bối cảnh xếp chồng. Chúng bao gồm chuyển tiếp, bộ lọc, vùng css, phương tiện được phân trang, v.v. 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 gây đau đầu cho các nhà phát triển mới làm quen với CSS. Tuy nhiên, mã hóa sau này sẽ dễ dàng hơn nếu bạn nắm vững về thứ tự xếp chồng, ngữ cảnh xếp chồng, vị trí và các thuộc tính có thể khiến ngữ cảnh xếp chồng trở thành “nhánh mở” như độ mờ. Nhưng tốt hơn hết là bạn nên rèn luyện trí nhớ khi đọc sách, nếu không bạn sẽ bị chết não.

Có thể bạn muốn xem thêm:

• 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 docker.subdomain
• API RESTful là gì? Cách thiết kế API bảo mật