Z-INDEX CSS LÀ GÌ

I. Giới thiệu

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

z-index giúp những element ông xã lên nhau theo phong cách mà mình 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ự xếp ông xã nhau của một nguyên tố vị trí. Trang bị tự ông chồng nhau được sắp xếp dựa theo quý hiếm số, thành phần HTML nào có chỉ số z-index cao hơn nữa sẽ nằm trên, ngược lại sẽ nằm dưới, giá trị mặc định là 0, rất có thể sử dụng số âm. Giá chỉ trị tốt nhất là ko sử dụng đối chọi vị.Chú ý: z-index chỉ thao tác làm việc cùng với trực thuộc tính position.

III. Z-index và position

Bây giờ mình sẽ tạo nên 3 block là green, red và blue đều ở trong một div gồm class là colors. 3 block này đang nằm cùng một mặt phẳng, ta có thể nói rằng hiện trên nó nằm trên và một viewport của màn hình

Bạn đang xem: Z-index css là gì

Red


Xem thêm: Phim Truyện Cổ Tích - Truyện Cổ Tích Việt Nam — Lấy Chồng Dê

Green


Xem thêm: Nêu Công Thức Tính Khối Lượng Adn (M), Công Thức Tính Khối Lượng Phân Tử Adn(M)

blue
.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à blue là 1 để 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 hóa cả? tất yếu vì họ đang thiếu trực thuộc tính positionChú ý! chỉ gồm 3 quý giá 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ới 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ề giá trị mặc định của chính nó là z-index: 0Tiếp theo ta set quý giá âm mang đến z-index của block blue

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

Mọi vật dụng lại như cũ

V. Lưu ý

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