Z-index là gì

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

Nếu bạn là một trong front-over developer cùng tiếp tục làm việc cùng với CSS, kiên cố bạn không hề xa lạ gì với z-index. Về định hướng thì phương thức hoạt động vui chơi của z-index rất 1-1 giản: từng element trên website được hiển thị ngang với dọc theo 2 trục x và y, hiển thị thứ từ bỏ ck lấn theo trục z. Hình vẽ dưới của smashingmagazine trình bày rất dễ dàng hiểu:

*

z-index với position

Bây giờ đồng hồ mình đang lấy ví dụ cụ thể. Chúng ta có 3 bloông xã green, red, xanh đầy đủ trực ở trong thẳng một div tất cả class kiểm tra. Như vậy để cho 3 block nằm trong cùng một stacking context. Trong và một stacking context thì vật dụng trường đoản cú trên dưới luôn được đảm bảo an toàn theo quy tắc: element làm sao có z-index cao hơn nữa đang hiện lên bên trên. Nếu chưa có một element làm sao được set z-index thì thứ từ vẫn phụ thuộc vào vào vật dụng từ mở ra từ bỏ 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, .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;.blue margin-top: -40px; margin-left: 120px; background: blue;

Bây tiếng 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 cùng block xanh xuống cuối cùng

.red z-index: 3;.green z-index: 2;.blue z-index: 1;quý khách hàng đang không thể tinh được khi thấy trang bị từ không còn thế đổi. z-index hoàn toàn không tồn tại cực hiếm trong những lúc này!

Lý bởi làm việc đó là, z-index hoàn toàn mất tác dụng so với đa số element không chỉ là định positionlà một trong những vào 3 quý hiếm absolute, fixed giỏi relative sầu. Mình đang chỉnh nlỗi sau

.red z-index: 3; position: relative;.green z-index: 2; position: relative;.blue z-index: 1; position: relative;Chúng ta vẫn lập tức thấy công dụng của z-index

*

z-index âm cùng element không có position

Bây giờ đồng hồ mình rước ví dụ về z-index âm và element không tồn tại thuộc tính position. Bloông chồng green được bỏ position đi nhỏng sau

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

*
Bloông xã green ngay lập tức chớp nhoáng mất ảnh hưởng của z-index cùng trờ về địa chỉ của một bloông xã với z-index: 0!Dĩ nhiên, để ẩn ra sau một bloông xã với z-index:0 thì có thể set z-index thành một số âm như với bloông chồng xanh dưới đây

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

*

Có thể trường tồn không ít Stacking Context !

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

Xem thêm: Kiều Minh Tuấn Sinh Năm - Diễn Viên Nam Kiều Minh Tuấn


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à blochồng red có z-index là một trong những, trong những lúc 2 bloông chồng còn lại không chỉ định z-index (đồng nghĩ cùng với bài toán có cực hiếm z-index = 0). Cả 3 bloông chồng đều phải sở hữu position: absolute phải thông số kỹ thuật về z-index là hoàn toàn có giá trị. Tại sao bloông xã red lại ngơi nghỉ bên dưới thuộc ?Nếu theo như đúng vật dụng từ thì 3 kăn năn bloông chồng đề xuất trông như bên dưới đây:

*

Để vấn đáp thắc mắc bên trên, họ hãy lưu ý cấu tạo DOM vào bài xích tân oán này. red. green, blue bây giờ là 3 span không ở trực tiếp trong một div, mà nằm trong 3 div là anh mẹ cùng nhau !

lúc này, red, green, xanh vẫn trực thuộc global stacking context tầm 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 bao gồm trực thuộc tính opacity: .99! Với opathành phố, div nói trên đang "msinh sống 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.

Xem thêm: Tìm Hiểu Về Công Nghệ 3D Trên Tivi 3D Là Gì ? Tivi 3D Là Gì

Điều này tức là, toàn thể div đựng red vẫn đang còn trang bị tự nhỏ dại rộng div cất green cùng xanh (bởi vì đồ vật từ bỏ lộ diện từ trước ra sau của DOM), dẫn cho hiển thị như bài bác toán ban sơ đề ra.

Kết luận

z-index là một trong những tính chất tốt gây nhức đầu đối với developer mới làm quen thuộc CSS. Tuy nhiên nếu như nắm bắt tốt về stacking context, position với hồ hết thuộc tính hoàn toàn có thể khiến stacking context "mlàm việc nhánh" nlỗi opađô thị, thì sẽ phần làm sao bớt-nhức-đầu hơn :)


Chuyên mục: Blogs