NGUYÊN LÝ HOẠT ĐỘNG CỦA Z-INDEX

Ngulặng lý hoạt động của z-index

Nếu bạn là 1 front-over developer với tiếp tục thao tác với CSS, Chắn chắn các bạn không còn lạ lẫm gì với z-index. Về định hướng thì phương thức hoạt động vui chơi của z-index khôn cùng solo giản: mỗi element trên trang web được hiển thị ngang và dọc theo 2 trục x với y, hiển thị trang bị từ bỏ chồng lấn theo trục z. Hình vẽ bên dưới của smashingmagazine mô tả rất đơn giản hiểu:

 

*

 

z-index với position

Bây tiếng mình đã lấy ví dụ rõ ràng. Chúng ta tất cả 3 blochồng green, red, xanh đông đảo trực ở trong thẳng một div bao gồm class kiểm tra. Như vậy để cho 3 block trực thuộc cùng một stacking context. Trong và một stacking context thì sản phẩm công nghệ tự trên dưới luôn luôn được đảm bảo an toàn theo quy tắc: element như thế nào có z-index cao hơn sẽ hiện hữu bên trên. Nếu chưa xuất hiện một element như thế nào được mix z-index thì lắp thêm từ bỏ đang nhờ vào vào sản phẩm công nghệ từ bỏ xuất hiện từ bỏ trước ra sau của DOM tree.

Bạn đang xem: Nguyên lý hoạt động của z-index


Red
Green
Blue
.kiểm tra 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 làm cho bloông xã red nổi lên đầu, bloông chồng green nổi lên thứ hai với blochồng xanh xuống cuối cùng

.red z-index: 3;.green z-index: 2;.blue z-index: 1;Quý khách hàng đã quá bất ngờ khi thấy thiết bị từ bỏ không thể gắng đổi. z-index hoàn toàn không có giá trị trong những khi này!

Lý bởi sinh sống đó là, z-index hoàn toàn mất chức năng so với mọi element không chỉ có định positionlà 1 trong những vào 3 quý hiếm absolute, fixed tốt relative. Mình đang 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 đang nhanh chóng 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 mang ví dụ về z-index âm và element không tồn tại thuộc tính position. Block green được bỏ 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 lập tức nhanh chóng mất ảnh hưởng của z-index và trờ về địa chỉ của một blochồng cùng với z-index: 0!Dĩ nhiên, để ẩn ra sau một bloông chồng cùng với z-index:0 thì có thể set z-index thành một trong những âm như cùng với bloông xã xanh dưới đây

 

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

*

 

cũng có thể vĩnh cửu tương đối nhiều Stacking Context !

2 ví dụ bên trên thật dễ phải ko :) Vậy thử lý giải bài xích toán thù sau đâ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, .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 tất cả z-index là một, trong những khi 2 block còn sót lại không chỉ có định z-index (đồng nghĩ với việc có cực hiếm z-index = 0). Cả 3 bloông chồng đều phải có position: absolute nên thông số về z-index là trọn vẹn có mức giá trị. Tại sao bloông xã red lại ở dưới cùng ?Nếu theo đúng máy từ bỏ thì 3 kăn năn block buộc phải trông nhỏng dưới đây:

 

*

 

Để trả lời thắc mắc bên trên, chúng ta hãy chú ý kết cấu DOM vào bài toán thù này. red. green, xanh hiện thời là 3 span không ở thẳng trong một div, nhưng mà phía trong 3 div là anh người mẹ cùng nhau !

Lúc này, red, green, blue vẫn ở trong global stacking context bình thường của DOM tree. Tuy nhiên cần phải chú ý một điểm nữa là red bên trong một div gồm trực thuộc tính opacity: .99! Với opathành phố, div nói 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 tiễn chỉ có mức giá trị vào nhánh stacking context nói trên.

Vấn đề này Tức là, toàn bộ div chứa red vẫn có thiết bị trường đoản cú nhỏ dại rộng div cất green và xanh (bởi trang bị từ lộ diện từ trước ra sau của DOM), dẫn mang lại hiển thị như bài toán thù lúc đầu đưa ra.

Kết luận

z-index là 1 trong những tính chất tuyệt gây nhức đầu so với developer mới có tác dụng quen thuộc CSS. Tuy nhiên nếu nắm bắt tốt về stacking context, position với phần lớn thuộc tính hoàn toàn có thể khiến cho stacking context "mngơi nghỉ nhánh" như opacity, thì sẽ phần làm sao bớt-nhức-đầu hơn :)

Leave a Reply

Your email address will not be published. Required fields are marked *