z-index trong css

z-index vào css có cách thức vận động là mỗi element bên trên website được hiển thị ngang và dọc từ 2 trục x cùng y, hiển thị sản phẩm công nghệ từ chồng lấn theo trục z. Nói đơn giản dễ dàng hơn nữa thì z-index càng tốt thì element kia đứng trước với hiện hữu bên trên.quý khách đang xem: Z-index css là gì


*

*

*

*

*

Nói tới đó là quá đầy đủ nhằm bạn đọc về z-index vào css  những trực thuộc tính đi kèm nhằm code. Còn ước ao hiểu sâu hơn, mời các bạn đi tiếp xuống phần sau đây.

Bạn đang xem: Z-index là gì

Stacking Order

Đây là một giữa những sự việc với z-index: Nó quá đơn giản dễ dàng, thế cho nên số đông những developer sẽ không quăng quật thời gian để đọc những rule của nó.

Thứ độc nhất, Lúc không tính đến 2 thuộc tính z-index và position, chỉ gồm một quy điều khoản khá đối chọi giản: máy từ xếp lớp đó là vật dụng trường đoản cú xuất hiện thêm vào HTML

Thứ hai, Khi tính tới trực thuộc tính position, thì lúc đó phần đông element được gán position (và cả các element con của nó) phần đa mở ra vùng phía đằng trước bất kì một element không gán position (ví dụ như như những nằm trong tính sau nhằm z-index có tác dụng: absolute, fixed hay relative)

Thđọng cha, ta hoàn toàn có thể coi nlỗi element làm sao có mức giá trị z-index cao hơn thế thì sẽ đứng trước element có mức giá trị z-index phải chăng hơn. Nghe đơn giản và dễ dàng cơ mà thực chất có nhiều phép tắc hơn thế:

z-index chỉ chạy so với element nào bao gồm gán position.z-index hoàn toàn có thể tạo ra ra stacking context.

Xem thêm: Phân Biệt Result, Outcome Là Gì ? Nghĩa Của Từ Outcome Trong Tiếng Việt

Stacking Contexts

9 CSS animation mới "mãn nhãn" cho các project

Một đội những element gồm chung một element thân phụ đã cùng dịch rời thông thường cùng nhau trong stacking order, khiến cho định nghĩa hotline là stacking context. Việc hiểu biết về stacking context đó là khóa xe để gọi trọn vẹn về kiểu cách z-index cùng stacking order chuyển động.

Mỗi một stacking context vẫn có một HTML element là element nơi bắt đầu (root element). khi một stacking context lắp với cùng một element, nó sẽ link toàn bộ những element bé vào 1 vị trí thắt chặt và cố định vào stacking order. Điều đó tức là nếu 1 element ở trong một stacking context nằm tại dưới cùng của stacking order, vẫn không có cách làm sao khiến cho nó xuất hiện phía trước một element nằm trong 1 stacking context có địa chỉ cao hơn vào stacking order, trong cả giả dụ mix z-index của nó tới 9999 !

Một stacking context hoàn toàn có thể được gắn với 1 element bằng một trong những 3 cách:

Lúc một element là gốc của document (thẻ )Lúc một element có giá trị position được phối khác với static và z-index khác autoLúc một element có mức giá trị opacity nhỏ tuổi hơn 1

Cập nhật: Bên cạnh opacity, một số property CSS new hiện thời cũng có thể sinh sản stacking context. Chúng bao gồm transforms, filters, css-regions, paged media… Như một qui định phổ biến, sẽ là nếu như 1 property CSS đề nghị render trong một offscreen context, nó sẽ tạo nên ra một stacking context mới.

Kết luận z-index vào css

z-index là một trong những đặc thù tốt khiến nhức đầu đối với developer mới làm cho quen CSS. Tuy nhiên trường hợp nắm bắt tốt về stacking order , stacking context, position và gần như nằm trong tính hoàn toàn có thể khiến stacking context “mngơi nghỉ nhánh” như opađô thị, thì đang phần làm sao đang một thể code nkhô nóng hơn trong tương lai. Mà tốt nhất có thể là vừa gọi vừa thực hành thực tế bắt đầu nhớ, chđọng hiểu ko sẽ bị loàn óc.

Bài viết liên quan

Trả lời

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 *