CSS từ A đến Z: thuộc tính z-index. Một blog tự do khác

Hình vuông màu hồng có giá trị chỉ mục z khác với giá trị tự động, tạo ra bối cảnh lớp phủ mới. Sự xuất hiện của bối cảnh lớp phủ ảnh hưởng đến cách phần tử con.

Bạn có thể thay đổi thứ tự xếp các ô con của hình vuông màu hồng. Tuy nhiên, họ chỉ mục z chỉ có ý nghĩa trong bối cảnh lớp phủ. Điều này có nghĩa là chúng ta sẽ không thể đặt hình vuông màu cam trước hình vuông màu xanh lam vì chúng ở trong các bối cảnh lớp phủ khác nhau.

Nếu chúng ta muốn các hình vuông màu xanh lam và màu cam là một phần của cùng một bối cảnh lớp phủ, chúng ta có thể biến hình vuông màu xanh lam thành con của hình vuông màu hồng. Điều này sẽ di chuyển hình vuông màu xanh phía sau hình màu cam.

https://codepen.io/ivhed/pen/erGoJE

Bối cảnh lớp phủ được tạo không chỉ bằng cách áp dụng thuộc tính z-index. Có một số thuộc tính khác khiến các phần tử tạo ra bối cảnh lớp phủ. Một số ví dụ: bộ lọc, độ mờ và biến đổi.

Hãy quay lại ví dụ trước của chúng tôi. Hình vuông màu xanh lại gắn liền với màu hồng. Lần này, thay vì thêm thuộc tính chỉ mục z vào hình vuông màu hồng, chúng ta sẽ áp dụng bộ lọc cho thuộc tính đó.

Xanh lam, .hồng, .cam (
vị trí: tuyệt đối;
) .hồng (
bộ lọc: xoay màu sắc (20deg);
) .màu xanh da trời (
chỉ số z: 2;
) .quả cam (
chỉ số z: 3;
) .màu xanh lá (
chỉ số z: 100;
}

https://codepen.io/ivhed/pen/LmWMQb

Hình vuông màu cam vẫn có chỉ số z cao hơn hình vuông màu xanh nhưng vẫn xuất hiện phía sau. Điều này là do giá trị bộ lọc khiến hình vuông màu hồng tạo bối cảnh lớp phủ mới.

Bản tóm tắt

Bằng cách sử dụng chỉ mục z trên các phần tử được định vị, chúng ta có thể thay đổi thứ tự xếp chồng mặc định của các phần tử.

Khi áp dụng một số thuộc tính CSS nhất định, một phần tử có thể tạo thành ngữ cảnh lớp phủ. Giá trị chỉ mục Z chỉ có ý nghĩa trong cùng ngữ cảnh lớp phủ.

Để có được thông tin thêm về cách hoạt động của thuộc tính z-index, tôi khuyên bạn nên đọc bài viết này. Cô ấy chính là người đã truyền cảm hứng cho tôi khi thực hiện ấn phẩm này.

Kiểm soát thuộc tính z-index thứ tự ứng dụng các phần tử được định vị khi chúng chồng lên nhau. Thuộc tính chấp nhận các giá trị nguyên dương và âm.

Trong một luồng thông thường, các phần tử vị trí: tĩnh được đặt tuần tự lần lượt theo thứ tự chúng được xác định trong tài liệu html. Mặc định là z-index: auto; .

Cơm. 1. Định vị các phần tử dọc theo trục Z

Thuộc tính z-index chỉ định thứ tự các phần tử dọc theo trục Z Thông thường, các phần tử có giá trị chỉ mục cao sẽ chồng lên các phần tử có giá trị thấp hơn và giá trị tự động, đặt chúng ở phía trước.

Cơm. 2. Tác động của thuộc tính z-index lên các phần tử được định vị

Bối cảnh lớp phủ

Nếu thuộc tính z-index và vị trí không được đặt rõ ràng cho các phần tử thì bối cảnh lớp phủ sẽ bằng thứ tự chúng xuất hiện trong mã nguồn. Nếu các phần tử không được chỉ định chỉ mục z, trình duyệt sẽ hiển thị các phần tử trên trang theo thứ tự sau:

Phần tử gốc

Các phần tử được định vị theo thứ tự chúng xuất hiện trong mã nguồn. Cái cuối cùng sẽ được đặt ở phía trước.

Cơm. 3. Thứ tự mặc định của các phần tử trong không gian 3D

Như có thể thấy trong hình, một phần tử có vị trí: tuyệt đối; ở phía trước, theo sau là văn bản, bên dưới là các phần tử nổi với float: left; , các phần tử khối không được định vị sẽ được đặt ở chế độ nền (vì các phần tử nổi và định vị bị xóa khỏi luồng, các phần tử không được định vị ở cấp độ khối sẽ bỏ qua chúng và được đặt lần lượt theo đánh dấu, do đó phần tử