Z-Index Css Là Gì

  -  

I. Giới thiệu

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

*
z-index góp những element chồng lên nhau Theo phong cách mà mình thích hiển thị.

II. Định nghĩa

Thuộc tính z-index thiết lập cấu hình đồ vật từ xếp ông chồng nhau của một thành phần địa chỉ. Thứ từ bỏ ck nhau được bố trí dựa theo quý giá số, thành phần HTML như thế nào tất cả chỉ số z-index cao hơn nữa đang nằm trong, ngược chở lại đã nằm dưới, quý hiếm khoác định là 0, có thể áp dụng số âm. Giá trị tốt nhất là ko thực hiện đơn vị chức năng.Crúc ý: z-index chỉ thao tác làm việc cùng rất ở trong tính position.

III. z-index và position

Bây giờ đồng hồ mình sẽ khởi tạo 3 bloông chồng là green, red và xanh hồ hết thuộc một div gồm class là colors. 3 bloông chồng này vẫn ở cùng một khía cạnh phẳng, ta nói theo một cách khác hiện 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: Các Cách Xác Định Xu Hướng Thị Trường, 5 Cách Xác Định Xu Hướng Thị Trường Forex

Green


Xem thêm: Tinh Dầu ( Essential Oils Là Gì ? Được Dùng Để Làm Gì? Mua Ở Đâu Hà Nội, Tphcm?

Blue
.colors margin-left: 40px; margin-top: 40px;.red, .green, .xanh 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 trực thuộc tính z-index vào 3 bloông chồng khớp ứng, red là 3, green là 2 và blue là 1 trong khiến cho red nổi lên đầu tới green cùng sau cuối là blue

.red z-index: 3;.green z-index: 2;.xanh z-index: 1;OOP! Không tất cả gì thay đổi cả? Tất nhiên vày chúng ta vẫn thiếu thốn trực thuộc tính positionCrúc ý! chỉ có 3 cực hiếm của position bắt đầu tác động cho tới z-index là absolute, fixed, relative sầu.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 nằm trong tính position

Lúc Này bọn họ xóa position của green đi

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

*

Lúc bấy giờ index của green trngơi nghỉ về giá trị khoác định của chính nó là z-index: 0Tiếp theo ta mix quý giá âm mang lại z-index của blochồng blue

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

*

Mọi sản phẩm công nghệ lại nlỗi cũ
*

V. Lưu ý

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