Mục lục:
Video: Cách Đòi Nợ THÔNG MINH chỉ bằng Lời Nói - Tâm Lý Học Đòi Nợ 2025
Khi bạn sử dụng định vị tuyệt đối, bạn có thể xác định chính xác vị trí đặt, vì vậy có thể chồng chéo lên nhau. Theo mặc định, các phần tử được mô tả sau này trong HTML được đặt trên đầu các phần tử được mô tả trước đó.
Xử lý chiều sâu trong CSS
Bạn có thể sử dụng thuộc tính CSS đặc biệt có tên
z-index
để thay đổi hành vi mặc định này. z -axis đề cập đến mức độ đóng một phần tử đối với người xem. Hình ảnh này cho thấy cách hoạt động này.
z-index
cho phép bạn thay đổi các phần tử xuất hiện gần hơn với người dùng.
Thuộc tính
z-index
yêu cầu một giá trị số. Số cao hơn có nghĩa là phần tử này gần với người dùng (hoặc trên trên cùng). Bất kỳ giá trị nào cho
z-index
đặt phần tử cao hơn các phần tử có
z-index
mặc định. Điều này có thể rất hữu ích khi bạn có các phần tử mà bạn muốn xuất hiện ở phần đầu của các phần tử khác (ví dụ: các trình đơn xuất hiện tạm thời trên đầu văn bản khác).
Đây là mã minh hoạ hiệu ứng
z-index
:
zindex. html
#blueBox {
màu nền: màu xanh lam;
chiều rộng: 100px;
chiều cao: 100px;
vị trí: tuyệt đối;
còn lại: 0px;
trên cùng: 0px;
lề: 0px;
z-index: 1;
}
#blackBox {
màu nền: đen;
chiều rộng: 100px;
chiều cao: 100px;
vị trí: tuyệt đối;
còn lại: 50px;
trên cùng: 50px;
lề: 0px;
}
Làm việc với z-index
Thay đổi duy nhất trong mã này là việc bổ sung thuộc tính
z-index
. Chỉ số z-index cao hơn, đối tượng đó càng gần đối với người dùng.
Dưới đây là một vài điều cần ghi nhớ khi sử dụng
z-index
:
- Một phần tử có thể che giấu hoàn toàn một phần tử khác. Khi bạn bắt đầu định vị hoàn toàn mọi thứ, một phần tử dường như biến mất vì nó được che phủ hoàn toàn bởi người khác. Thuộc tính
z-index
là một cách hay để kiểm tra tình huống này. - Tiêu cực
z-index
có thể là vấn đề. Giá trị choz-index
phải là dương. Mặc dù các giá trị âm được hỗ trợ, một số trình duyệt (đáng chú ý là các phiên bản cũ của Firefox) không xử lý chúng tốt và có thể khiến phần tử của bạn biến mất. - Tốt nhất nên đưa ra tất cả các giá trị
z-index
. Nếu bạn xác địnhz-index
cho một số phần tử và đểz-index
không xác định cho người khác, bạn không thể đảm bảo chính xác điều gì sẽ xảy ra. Nếu nghi ngờ, chỉ cần cung cấp cho mỗi giá trị của riêngz-index
, và bạn sẽ biết chính xác những gì chồng chéo lên nhau. - Không đưa ra hai yếu tố cùng
z-index
. Điểm củaz-index
là xác định rõ yếu tố nào sẽ xuất hiện gần hơn. Đừng đánh bại mục đích này bằng cách gán giá trịz-index
cùng với hai phần tử khác nhau trên cùng một trang.