I. Giới thiệu

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

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

III. z-index cùng position

Bây tiếng bản thân sẽ tạo 3 blochồng là green, red với blue đầy đủ nằm trong một div bao gồm class là colors. 3 bloông xã này sẽ ở cùng một phương diện phẳng, ta có thể nói rằng bây giờ nó nằm tại và một viewport của màn hình




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

Red


Xem thêm: "Adt ( Abstract Data Type Là Gì ? Định Nghĩa Và Giải Thích Ý Nghĩa

Green


Xem thêm: Vision Là Ai ? Giải Thích Mọi Thứ Về White Vision Đúng Nhất!

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;.xanh margin-top: -40px; margin-left: 120px; background: blue;

*

Ta thêm nằm trong tính z-index vào 3 bloông xã khớp ứng, red là 3, green là 2 với xanh là một trong để cho red nổi lên đầu cho tới green với cuối cùng là blue

.red z-index: 3;.green z-index: 2;.xanh z-index: 1;OOP! Không có gì biến hóa cả? Tất nhiên vì bọn họ sẽ thiếu thốn ở trong tính positionCrúc ý! chỉ có 3 quý hiếm của position mới ảnh hưởng cho tới z-index là absolute, fixed, relative sầu.red z-index: 3; position: relative;.green z-index: 2; position: relative;.xanh z-index: 1; position: relative;

*

IV. z-index âm cùng element không tồn tại thuộc tính position

Bây Giờ chúng ta xóa position của green đi

.green z-index: 2; /*position: relative;*/

*

Trong thời điểm này index của green trở về giá trị khoác định của chính nó là z-index: 0Tiếp theo ta set quý giá âm mang lại z-index của blochồng blue

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

*

Mọi lắp thêm lại nhỏng cũ
*

V. Lưu ý

Trong các dự án công trình với khi chúng ta tìm kiếm về z-index vẫn thấy nhiều người luôn luôn chỉ các bạn cách dùng z-index với cái giá trị là trường đoản cú 99 hoặc 999 trsống xuống. Vậy chúng ta tất cả thắc mắc bởi sao k? Đơn giản là bạn muốn bloông chồng đó ở tối đa và những blochồng tiếp sau thì chỉ cần giảm dần dần là được và nhìn số ngulặng nó vẫn giỏi hơn là bạn đang phối mang lại quý hiếm cao nhất của bản thân mình là 4 rồi cứ đọng bớt dần dần cho tới cực hiếm âm :v. Vì vào một dự án công trình không phải chỉ có một mình các bạn code Hơn nữa không ít người không giống nên việc Đánh Giá trị cao đến z-index cũng hỗ trợ cho vấn đề thao tác công dụng hơn


Chuyên mục: Ý NGHĨA
Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *