• Giới thiệu
  • Liên hệ
  • Chính sách bảo mật
logo
No Result
View All Result
No Result
View All Result
logo
No Result
View All Result
Home z-index là gì

Z-index là gì

Share on Facebook Share on Twitter

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;

*
Bloông xã green ngay mau lẹ mất ảnh hưởng của z-index và trờ về địa điểm của một bloông xã cùng với z-index: 0!Dĩ nhiên, để ẩn ra sau một block với z-index:0 thì hoàn toàn có thể set z-index thành một số âm nlỗi cùng với bloông xã xanh 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ể 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 :)

Share Tweet Pin

BÀI VIẾT LIÊN QUAN

thoát safe mode win 10

Thoát safe mode win 10

by admin
25/10/2021
những bài hát về tình yêu lãng mạn hay nhất

Những bài hát về tình yêu lãng mạn hay nhất

by admin
26/10/2021
download 20 font phấn bảng việt hóa tuyệt đẹp đầy đủ nhất — ngáo content

Download 20 font phấn bảng việt hóa tuyệt đẹp đầy đủ nhất — ngáo content

by admin
17/10/2021
cách ẩn danh sách bạn bè trên facebook

Cách ẩn danh sách bạn bè trên facebook

by admin
15/11/2021

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bài Viết Mới Nhất

Căn hộ R1 Vinhomes Ocean Park hướng Đông Bắc | Bảng giá mới nhất

15:39, 12/07/2022
Đối tượng phù hợp với căn hộ studio The Origami

Đối tượng phù hợp với căn hộ studio The Origami

10:39, 17/06/2022
The Origami Vinhomes Grand Park | Chi tiết dự án mới nhất

The Origami Vinhomes Grand Park | Chi tiết dự án mới nhất

10:01, 02/06/2022
Chia Sẻ Kinh Nghiệm Khi Đi Thi Đường Trường B1, Phương Thức Thi Đường Trường Lái Xe Ô Tô

Chia Sẻ Kinh Nghiệm Khi Đi Thi Đường Trường B1, Phương Thức Thi Đường Trường Lái Xe Ô Tô

14:50, 20/05/2022

Đề xuất cho bạn

Lỗi windows cannot print due to a problem with the current printer setup

19:39, 29/08/2021
mơ bắt được cá đánh con gì

Mơ bắt được cá đánh con gì

23:15, 18/12/2021
sự nóng lên toàn cầu tiếng anh

Sự nóng lên toàn cầu tiếng anh

23:33, 27/10/2021
wondershare filmora 9 (32/64 bit) free download with crack

Wondershare filmora 9 (32/64 bit) free download with crack

14:42, 03/11/2021
Căn hộ R1 Vinhomes Ocean Park Hướng Bắc | Giá bán & Ưu đãi mới nhất

Căn hộ R1 Vinhomes Ocean Park Hướng Bắc | Giá bán & Ưu đãi mới nhất

15:22, 27/12/2022
xem lịch sử cuộc gọi iphone từ lâu

Xem lịch sử cuộc gọi iphone từ lâu

18:18, 06/09/2021

Giới thiệu

phamnhantutien.vn là website chia sẻ kiến thức hoàn toàn miễn phí. Cùng với sự phát triển công nghệ và ngành thể thao điện tử, thì ngày càng có nhiều người tìm hiểu thêm lĩnh vực này. Chính vì thế, phamnhantutien.vn được tạo ra nhằm đưa thông tin hữu ích đến người dùng có kiến thức hơn về internet.

Danh Mục

Bài viết hay

  • Có nên lau chùi bàn thờ thường xuyên
  • Cách tìm số điện thoại vừa gọi đến
  • Bằng fc chạy được xe gì
  • Xóa dòng kẻ ngang trong word 2007
  • Ghép phụ đề vào phim

Textlink Quảng Cáo

  • Giới thiệu
  • Liên hệ
  • Chính sách bảo mật

© 2023 phamnhantutien.vn thành lập và phát triển vì cộng đồng.

x
No Result
View All Result

© 2023 phamnhantutien.vn thành lập và phát triển vì cộng đồng.