Khi bạn thiết kế bố cục của mình bằng CSS, bạn thường định vị các phần tử lên / xuống hoặc trái / phải. z-index cho phép chúng tôi di chuyển các phần tử trên chiều thứ 3 trên trục Z, với hiệu ứng xếp chồng (chồng lên nhau).
z-index thuộc tính lấy auto từ khóa hoặc một số nguyên. Đây là tất cả các khai báo hợp lệ:
z-index: auto; z-index: -1; z-index: 9999;
Lưu ý :Để áp dụng z-index, chúng ta cũng cần định vị các phần tử, sử dụng position thuộc tính tương đối, tuyệt đối hoặc cố định. Nếu không có vị trí nào được chỉ định, nó sẽ giống như áp dụng z-index: auto và sẽ không có ngữ cảnh xếp chồng nào được áp dụng.
Với ý nghĩ đó, hãy xem một ví dụ.
Hãy xác định vị trí của một số con lợn Guinea
Bạn có thể kiểm tra ví dụ này tại Codepen. Chơi với nó và viết mã với tôi!
Chúng tôi sẽ đặt hai con lợn Guinea, hoặc Cuys (nghe dễ thương hơn). Hãy tưởng tượng chúng ta đang ở trong mùa hè nên nhiệt độ bên ngoài là 90 độ. Cuy số 1 sẽ được đặt trong một cái hồ, cô ấy sẽ có một khoảng thời gian vui vẻ. Cuy # 2 rất lười nên chúng ta cần pha cho anh ấy một ít cà phê để đánh thức anh ấy! Vì vậy, chúng tôi sẽ xếp Cuy # 2 của mình với cà phê để anh ấy có thể uống.
Không có bất kỳ định vị hoặc CSS nào, hình ảnh của chúng ta trông giống như sau:
Ý tưởng là tạo bối cảnh xếp chồng bằng cách sử dụng z-index để đặt một số hình ảnh lên trên hồ và cà phê.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Ngoài ra, hãy nhớ rằng chúng ta cần thêm định vị cho các phần tử của mình để áp dụng chỉ số z. Hãy tiếp tục và xác định vị trí Cuy số 1 của chúng tôi:
img.cuy.one {
position: absolute;
} Bạn của chúng ta đâu rồi? Hãy tiếp tục và thêm bối cảnh xếp chồng cao hơn để nó ở trên mặt hồ:
img.cuy.one {
position: absolute;
z-index: 1;
} Yay! Cuy của chúng tôi ở trên đầu hồ. Bây giờ chúng tôi cần thêm một số đệm để đặt nó bên trong hồ, nhưng tôi sẽ để bạn chơi với nó.
Bây giờ chúng ta đã biết cách tạo ngữ cảnh xếp chồng bằng cách sử dụng z-index , chúng ta có thể đặt con vật thứ hai của mình rất dễ dàng:
img.cuy.two {
position: absolute;
width: 160px;
padding: 100px;
z-index: 1;
} Một lần nữa phần đệm sẽ dùng để định vị chính xác hình ảnh và chiều rộng được sử dụng để chỉ định kích thước của người bạn nhỏ của chúng ta. Với điều này, chúng tôi đã hoàn thành nhiệm vụ của mình và mọi người đều vui vẻ và cảm thấy sảng khoái:
Kết luận
Chơi xung quanh với z-index nhường chỗ cho những ý tưởng bố cục thú vị. Trên Codepen, tôi cũng đã cung cấp một ví dụ thứ hai về thiết kế trò chuyện pop được định vị và với chỉ mục z ở trên cùng của mọi thứ. Kiểm tra nó ra!
Đừng quên rằng bạn phải luôn định vị các phần tử nếu không chỉ số z của bạn sẽ không hoạt động. Hãy thử chơi xung quanh Codepen bằng cách tháo định vị và tự mình xem nó.
Một khuyến nghị khác là bạn phải áp dụng chỉ số z cho các phần tử anh chị em. Trong các ví dụ của chúng tôi, các hình ảnh của chúng tôi không được lồng vào nhau và là anh chị em (cạnh nhau). Nếu bạn có các phần tử lồng nhau sâu, chỉ mục z có thể không hoạt động như mong đợi . Vì vậy, hãy ghi nhớ điều đó.