Z-index là gì

Nguyên lý buổi giao lưu của z-index

Nếu bạn là 1 trong front-end developer với tiếp tục thao tác làm việc với CSS, kiên cố chúng ta không còn không quen gì với z-index. Về triết lý thì cách thức hoạt động vui chơi của z-index cực kỳ solo giản: từng element trên trang web được hiển thị ngang với dọc theo 2 trục x cùng y, hiển thị thiết bị từ ông chồng lấn theo trục z. Hình vẽ bên dưới của smashingmagazine biểu thị rất đơn giản hiểu:

*

z-index và position

Bây giờ đồng hồ bản thân sẽ mang ví dụ cụ thể. Chúng ta có 3 bloông chồng green, red, blue đầy đủ trực ở trong trực tiếp một div bao gồm class demo. Vấn đề này làm cho 3 bloông chồng thuộc cùng một stacking context. Trong cùng một stacking context thì thiết bị từ bỏ trên dưới luôn được đảm bảo an toàn theo quy tắc: element nào gồm z-index cao hơn nữa đang hiện lên trên. Nếu chưa xuất hiện một element như thế nào được phối z-index thì vật dụng tự sẽ dựa vào vào đồ vật trường đoản cú xuất hiện tự trước ra sau của DOM tree.

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


Red
Green
Blue
.demo 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;

Bây giờ thêm z-index vào 3 block khiến cho bloông xã red nổi lên đầu, bloông xã green nổi lên thứ hai với bloông xã xanh xuống cuối cùng

.red z-index: 3;.green z-index: 2;.xanh z-index: 1;Quý khách hàng đang không thể tinh được thấy lúc trang bị từ không hề núm đổi. z-index trọn vẹn không có cực hiếm trong những lúc này!

Lý vì nghỉ ngơi đây là, z-index hoàn toàn mất chức năng đối với gần như element không chỉ định positionlà 1 trong trong 3 giá trị absolute, fixed tuyệt relative sầu. Mình đã chỉnh nlỗi sau

.red z-index: 3; position: relative;.green z-index: 2; position: relative;.xanh z-index: 1; position: relative;Chúng ta đang chớp nhoáng thấy tác dụng của z-index

*

z-index âm với element không có position

Bây giờ bản thân đem ví dụ về z-index âm và element không tồn tại trực thuộc tính position. Blochồng green được bỏ position đi nhỏng sau

.red z-index: 3; position: relative;.green z-index: 2; /*position: relative;*/.blue z-index: 1; position: relative;

*
Block green tức thì mau chóng mất ảnh hưởng của z-index và trờ về vị trí của một block cùng với z-index: 0!Dĩ nhiên, để ẩn ra sau đó 1 block với z-index:0 thì có thể phối z-index thành một số âm như cùng với bloông chồng blue bên dưới đây

.red z-index: 3; position: relative;.green z-index: 2; /*position: relative;*/.xanh z-index: -1; position: relative;

*

Có thể tồn tại tương đối nhiều Stacking Context !

2 ví dụ bên trên thiệt dễ đề xuất không :) Vậy thử giải thích bài xích tân oán dưới đây.

Xem thêm: Đọc Truyện Thám Tử Lừng Danh Conan Tập 1, Thám Tử Lừng Danh Conan


Red
Green
Blue
div:first-child opacity: .99;.red, .green, .blue position: absolute; width: 100px; color: white; line-height: 100px; text-align: center;.red z-index: 1; top: 20px; left: 20px; background: red;.green top: 60px; left: 60px; background: green;.xanh top: 100px; left: 100px; background: blue;

*

Rõ ràng là blochồng red có z-index là 1 trong những, trong khi 2 bloông xã còn sót lại không những định z-index (đồng suy nghĩ với Việc với quý giá z-index = 0). Cả 3 bloông chồng đều có position: absolute buộc phải thông số kỹ thuật về z-index là trọn vẹn có mức giá trị. Tại sao blochồng red lại nghỉ ngơi dưới cùng ?Nếu theo đúng sản phẩm công nghệ từ thì 3 khối block bắt buộc trông nhỏng dưới đây:

*

Để vấn đáp câu hỏi bên trên, bọn họ hãy xem xét cấu trúc DOM vào bài xích toán thù này. red. green, xanh hiện giờ là 3 span ko ở trực tiếp vào một div, nhưng nằm trong 3 div là anh mẹ cùng nhau !

lúc này, red, green, blue vẫn ở trong global stacking context phổ biến của DOM tree. Tuy nhiên rất cần được chú ý một điểm nữa là red phía trong một div bao gồm thuộc tính opacity: .99! Với opathành phố, div nói trên đang "mngơi nghỉ nhánh" ra thành một stacking context mới. Và z-index:1 của red về thực tế chỉ có giá trị trong nhánh stacking context nói trên.

Xem thêm: Tạp Chí Playboy Là Gì ? Một Play Boy Liệu Có Phải Là Một Kẻ Trăng Hoa?

Điều này tức là, cục bộ div chứa red vẫn đang còn thiết bị tự nhỏ dại hơn div chứa green và blue (vì vật dụng từ mở ra từ bỏ trước ra sau của DOM), dẫn mang lại hiển thị nhỏng bài toán thù lúc đầu đặt ra.

Kết luận

z-index là một đặc thù tuyệt khiến nhức đầu so với developer bắt đầu làm cho quen CSS. Tuy nhiên giả dụ thâu tóm giỏi về stacking context, position và đông đảo ở trong tính hoàn toàn có thể khiến stacking context "msinh sống nhánh" nlỗi opacity, thì sẽ phần làm sao bớt-nhức-đầu hơn :)


Chuyên mục: Là Gì