I. Giới thiệu
Nếu bạn là 1 người giỏi hình học không gian thì sẽ dễ nắm bắt về z-index này. Rõ ràng index tất cả 3 tọa độ là x, y, z. Với x, y là tọa độ mặt phẳng, có thể nói nó là width với height trong css. Z là trục không khí để chế tác ra cấu trúc 3D. Hình dưới là của smashingmagazine để giúp bạn làm rõ hơn:

II. Định nghĩa
Thuộc tính z-index tùy chỉnh cấu hình thứ từ bỏ xếp ông chồng nhau của một yếu tố vị trí. Máy tự ông xã nhau được thu xếp dựa theo quý hiếm số, nhân tố HTML nào tất cả chỉ số z-index cao hơn nữa sẽ ở trên, trái lại sẽ ở dưới, giá trị mặc định là 0, có thể sử dụng số âm. Giá trị tốt nhất có thể là không sử dụng đơn vị.Chú ý: z-index chỉ làm việc cùng với nằm trong tính position.III. Z-index với position
Bây tiếng mình sẽ tạo nên 3 block là green, red và blue đều nằm trong một div có class là colors. 3 block này đang nằm cùng một mặt phẳng, ta có thể nói hiện trên nó ở trên và một viewport của màn hình
Bạn đang xem: Z-index là gì
Red
Green
Xem thêm: Vận Tốc Máu Là Gì ? Vận Tốc Máu Thay Đổi Trong Hệ Mạch Như Thế Nào?
xanh
.colors margin-left: 40px; margin-top: 40px;.red, .green, .blue width: 100px; height: 100px; color: white; line-height: 100px; text-align: center;.red background: red;.green margin-top: -40px; margin-left: 60px; background: green;.blue margin-top: -40px; margin-left: 120px; background: blue;

.red z-index: 3;.green z-index: 2;.blue z-index: 1;OOP! không tồn tại gì biến đổi cả? tất nhiên vì chúng ta đang thiếu thuộc tính positionChú ý! chỉ có 3 quý hiếm của position mới tác động tới z-index là absolute, fixed, relative.red z-index: 3; position: relative;.green z-index: 2; position: relative;.blue z-index: 1; position: relative;

IV. Z-index âm và element không tồn tại thuộc tính position
Hiện tại bọn họ xóa position của green đi.green z-index: 2; /*position: relative;*/

.blue z-index: -1; position: relative;


V. Lưu giữ ý
Trong những dự án và khi bạn search về z-index sẽ thấy nhiều người luôn luôn chỉ bạn cách sử dụng z-index với mức giá trị là từ 99 hoặc 999 trở xuống. Vậy chúng ta có thắc mắc vì sao k? Đơn giản là bạn muốn block đó ở tối đa và những block tiếp theo thì chỉ cần giảm dần dần là được và nhìn số nguyên nó vẫn xuất sắc hơn là nhiều người đang set đến giá trị tối đa của bản thân là 4 rồi cứ giảm dần tới cực hiếm âm :v. Bởi trong một dự án không hẳn chỉ có 1 mình bạn code nhưng mà còn đa số người khác buộc phải việc đánh giá trị cao mang lại z-index cũng giúp cho việc có tác dụng việc kết quả hơn