Nguim lý buổi giao lưu của z-index
Nếu các bạn là 1 trong những front-over developer với thường xuyên thao tác làm việc với CSS, vững chắc chúng ta không còn không quen gì cùng với z-index. Về lý thuyết thì cách thức buổi giao lưu của z-index hết sức solo giản: mỗi element trên trang web được hiển thị ngang và dọc từ 2 trục x và y, hiển thị máy trường đoản cú ông xã lấn theo trục z. Hình vẽ dưới của smashingmagazine trình bày rất dễ hiểu:
z-index với position
Bây giờ mình đang rước ví dụ rõ ràng. Chúng ta có 3 bloông xã green, red, xanh đông đảo trực thuộc trực tiếp một div bao gồm class kiểm tra. Vấn đề này làm cho 3 block thuộc cùng một stacking context. Trong và một stacking context thì sản phẩm công nghệ từ xấp xỉ luôn được bảo vệ theo quy tắc: element nào bao gồm z-index cao hơn nữa đang hiện hữu trên. Nếu chưa xuất hiện một element nào được set z-index thì sản phẩm công nghệ từ bỏ vẫn dựa vào vào sản phẩm từ lộ diện tự trước ra sau của DOM tree.
Bạn đang xem: Z-index là gì
Red
Green
Blue
.chạy thử 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;
Bây giờ thêm z-index vào 3 bloông xã để cho block red nổi lên đầu, block green nổi lên thứ 2 và 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 đã không thể tinh được khi thấy thứ tự không còn cố gắng đổi. z-index hoàn toàn không tồn tại cực hiếm trong lúc này!
Lý do nghỉ ngơi đây là, z-index hoàn toàn mất chức năng so với hầu như element không chỉ là định positionlà một vào 3 quý hiếm absolute, fixed giỏi relative sầu. Mình sẽ chỉnh như sau
.red z-index: 3; position: relative;.green z-index: 2; position: relative;.blue z-index: 1; position: relative;Chúng ta đã mau lẹ thấy kết quả của z-index
z-index âm với element không có position
Bây giờ bản thân lấy ví dụ về z-index âm với element không có thuộc tính position. Block green được quăng quật position đi nlỗi sau
.red z-index: 3; position: relative;.green z-index: 2; /*position: relative;*/.xanh z-index: 1; position: relative;
.red z-index: 3; position: relative;.green z-index: 2; /*position: relative;*/.xanh z-index: -1; position: relative;
Có thể trường thọ rất nhiều Stacking Context !
2 ví dụ trên thật dễ dàng đề nghị không :) Vậy hãy thử lý giải bài xích toán dưới đây.
Xem thêm: Truyện Tranh Cho Bé Dưới 1 Tuổi Thông Minh, Truyện Cho Bé 1 Tuổi
Red
Green
Blue
div:first-child opacity: .99;.red, .green, .xanh 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à bloông chồng red bao gồm z-index là một, trong những khi 2 bloông chồng còn sót lại không những định z-index (đồng nghĩ về cùng với việc sở hữu quý hiếm z-index = 0). Cả 3 bloông chồng đều phải sở hữu position: absolute phải thông số về z-index là trọn vẹn có giá trị. Tại sao bloông chồng red lại sống bên dưới thuộc ?Nếu theo như đúng vật dụng từ bỏ thì 3 kăn năn bloông chồng đề xuất trông nhỏng dưới đây:
Để vấn đáp thắc mắc trên, chúng ta hãy chú ý cấu trúc DOM trong bài tân oán này. red. green, xanh bây giờ là 3 span không ở thẳng trong một div, mà phía bên trong 3 div là anh chị em cùng nhau !
khi này, red, green, blue vẫn nằm trong global stacking context thông thường của DOM tree. Tuy nhiên cần phải để ý một điểm nữa là red phía trong một div gồm nằm trong tính opacity: .99! Với opacity, div nói bên trên đã "mlàm việc 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ị vào nhánh stacking context nói trên.
Vấn đề này có nghĩa là, cục bộ div cất red vẫn có thứ tự nhỏ tuổi hơn div cất green cùng xanh (vày sản phẩm công nghệ từ bỏ xuất hiện thêm trường đoản cú trước ra sau của DOM), dẫn mang đến hiển thị nlỗi bài bác tân oán ban đầu đặt ra.
Kết luận
z-index là 1 tính chất xuất xắc gây nhức đầu đối với developer mới làm quen thuộc CSS. Tuy nhiên trường hợp thâu tóm xuất sắc về stacking context, position và số đông thuộc tính hoàn toàn có thể khiến cho stacking context "mnghỉ ngơi nhánh" nlỗi opathành phố, thì vẫn phần nào bớt-nhức-đầu hơn :)
