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:

*
z-index giúp những element ông xã lên nhau theo phong cách mà bạn muốn hiển thị.

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;

*

Ta thêm thuộc tính z-index vào 3 block tương ứng, red là 3, green là 2 và xanh là 1 khiến cho red nổi lên đầu tới green và ở đầu cuối là 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;*/

*

Lúc này index của green trở về quý giá mặc định của nó là z-index: 0Tiếp theo ta set giá trị âm mang lại z-index của block blue

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

*

Mọi thiết bị lại như cũ
*

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