Chỉ mục css

Question

Thuộc tính z-index dùng để chỉ thứ hạng của các lớp thẻ trong HTML. Nói một cách đơn giản, nếu các thẻ là các trang giấy thì số thứ tự của trang chính chỉ là số z-index, làm cho trang này ở trước trang kia

Nội dung chính Show

Thiết kế Trang chủ như hình sau
Phân tích cấu trúc trang web như sau
Bước 1. Tạo cấu trúc thư mục dự án
Bước 2. tạo trang chủ index.html
Đặt hàng
Tạo đơn hàng
Đặt hàng, Tạo đơn hàng, Giao hàng Nhanh chóng
Báo cáo Doanh thu tuyệt vời Theo dõi đơn hàng của bạn.
Source code tham khảo

z-index luôn đi kèm với thuộc tính position. Trong ví dụ minh họa ở trên, tôi có nói về các trang sách, nó không hoàn toàn đúng Chắc chắn, bởi vì ở sách, trang nào có số lượng lớn thì nằm dưới, nhưng với chỉ mục z, thẻ HTML có giá trị lớn nhất thì

Giá trị của z-index phải là số nguyên, dương hoặc âm. Nếu chúng ta không quy định giá trị cụ thể của z-index, thì nó mặc định là 0, và trong trang HTML khi đó, theo thứ tự từ trên xuống dưới của các dòng mã, các thẻ ở bên dưới sẽ xếp phía trên. Ví dụ

Code of the stage on

Tôi không viết ra giá trị cụ thể của z-index, do đó các thẻ ở bên dưới sẽ xếp hạng lên trên, căn cứ vào đoạn mã trên thì chính là hộp màu . .

Giờ tôi sẽ đặt hộp màu đen xếp hạng trên cùng, hộp màu xanh ở vị trí thứ hai và hộp màu đỏ ở vị trí cuối cùng, để thực hiện công việc đó, tôi sẽ thêm chỉ số z vào và để đánh giá cao hơn

mẫu mã

Các dòng code vẫn giữ nguyên thứ tự, tuy nhiên tôi có thể dịch các hộp sang trái và phải đôi chút để bạn dễ quan sát các lớp

Để thẻ nào luôn xếp hạng ở vị trí cao nhất, chúng ta thường để z-index của nó thật cao, thật giả z-index. 10;

Giờ chúng ta sẽ thực hiện hành động về z-index theo chủ đề của bài viết như sau. tôi muốn một hình ảnh, mà khi di chuột qua nó sẽ thay đổi thành hình ảnh khác

Ý tưởng giải yêu cầu trên

Tôi sẽ tạo 2 ảnh ở cùng một vị trí và xếp chồng chúng lên nhau, ảnh có chỉ số z cao sẽ ở trên
Khi tôi di chuột qua ảnh, thì tôi sẽ thay đổi giá trị z-index để ảnh bên dưới sẽ xếp hạng trên

mẫu mã

CSS

div {
position:relative;
height:252px;
}
img {
position:absolute;
}
#tren:hover {
z-index:-1;
}
#duoi:hover {
z-index:1;
}

HTML

Kết quả

Cuối cùng thông tin. Bạn có hỏi, sao lại để là z-index mà không phải a-index hay b-index? . Còn index dịch ra tiếng Việt là chỉ số, vậy z-index, hiểu cách nôm na là chỉ số theo chiều sâu