Z-INDEX LÀ GÌ

     

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

Nếu bạn là 1 trong những front-end developer cùng thường xuyên làm việc với CSS, dĩ nhiên bạn không còn lạ lẫm gì cùng với z-index. Về định hướng thì phương pháp thức buổi giao lưu của z-index rất 1-1 giản: mỗi element trên website được hiển thị ngang cùng dọc theo 2 trục x cùng y, hiển thị vật dụng tự chồng lấn theo trục z. Hình vẽ dưới của smashingmagazine thể hiện rất giản đơn hiểu:

*

z-index và position

Bây giờ đồng hồ mình vẫn lấy ví dụ cụ thể. Chúng ta có 3 block green, red, blue đều trực ở trong trực tiếp một div bao gồm class demo. Điều này làm cho 3 block thuộc và một stacking context. Trong và một stacking context thì sản phẩm công nghệ tự bên trên dưới luôn được đảm bảo theo quy tắc: element nào có z-index cao hơn nữa sẽ hiện lên trên. Nếu chưa tồn tại một element nào được set z-index thì sản phẩm công nghệ tự sẽ dựa vào vào thứ tự xuất hiện thêm 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;.blue margin-top: -40px; margin-left: 120px; background: blue;

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

.red z-index: 3;.green z-index: 2;.blue z-index: 1;Bạn sẽ quá bất ngờ khi thấy thứ tự không còn thay đổi. Z-index trọn vẹn không có mức giá trị trong những khi này!

Lý do tại đây là, z-index trọn vẹn mất công dụng đối với phần đông element không chỉ có định positionlà một trong những 3 cực hiếm absolute, fixed giỏi relative. Mình đã 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 sẽ lập tức thấy kết quả của z-index

*

z-index âm và element không tồn tại position

Bây tiếng mình lấy ví dụ về z-index âm và element không tồn tại thuộc tính position. Block green được quăng quật position đi như sau

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

*
Block green ngay mau lẹ mất tác động của z-index và trờ về địa chỉ của một block với z-index: 0!Dĩ nhiên, nhằm ẩn ra sau đó 1 block cùng với z-index:0 thì hoàn toàn có thể set z-index thành một vài âm như cùng với block blue dưới đây

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

*

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

2 ví dụ trên thật dễ cần không :) Vậy hãy thử phân tích và lý giải bài toán bên dưới đây.

Xem thêm: Cách Phục Hồi Tin Nhắn Messenger Đơn Giản


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;.blue top: 100px; left: 100px; background: blue;

*

Rõ ràng là block red gồm z-index là 1, trong khi 2 block còn lại không chỉ có định z-index (đồng nghĩ với vấn đề mang cực hiếm z-index = 0). Cả 3 block đều có position: absolute nên thông số kỹ thuật về z-index là hoàn toàn có giá chỉ trị. Vì sao block red lại ở dưới cùng ?Nếu theo như đúng thứ từ thì 3 khối block đề nghị trông như bên dưới đây:

*

Để trả lời thắc mắc trên, họ hãy nhằm ý cấu trúc DOM trong việc này. Red. Green, blue bây giờ là 3 span ko nằm trực tiếp trong một div, mà bên trong 3 div là anh chị em với nhau !

Khi này, red, green, blue vẫn ở trong global stacking context bình thường của DOM tree. Tuy vậy cần phải 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 opacity, div nói trên sẽ "mở nhánh" ra thành một stacking context mới. Cùng z-index:1 của red về thực tế chỉ có giá trị vào nhánh stacking context nói trên.

Xem thêm: Tổng Hợp Những Câu Đố Vui Có Đáp Án, 275 Câu Đố Vui Có Đáp Án

Điều này còn có nghĩa là, toàn bộ div cất red vẫn đang còn thứ tự nhỏ dại hơn div đựng green và blue (do trang bị tự mở ra từ trước ra sau của DOM), dẫn cho hiển thị như bài toán ban sơ đặt ra.

Kết luận

z-index là 1 tính hóa học hay tạo nhức đầu so với developer new làm quen CSS. Tuy nhiên nếu gắng bắt giỏi về stacking context, position và gần như thuộc tính hoàn toàn có thể khiến stacking context "mở nhánh" như opacity, thì đang phần làm sao bớt-nhức-đầu hơn :)