Z-INDEX CSS LÀ GÌ

     

z-index vào css có phương thức hoạt đụng là từng element trên trang web được hiển thị ngang và dọc theo 2 trục x cùng y, hiển thị trang bị tự ông chồng lấn theo trục z. Nói dễ dàng và đơn giản hơn thì z-index càng cao thì element đó đứng trước với hiện lên trên.

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

*
*
*
*
*

Nói tới đây là quá đầy đủ để chúng ta hiểu về z-index trong css  các trực thuộc tính đi kèm để code. Còn mong mỏi hiểu sâu hơn, mời chúng ta đi tiếp xuống phần bên dưới đây.

Tham khảo việc làm cho lập trình CSS lương cao trên bulongvietlong.com.

Stacking Order

Đây là giữa những vấn đề cùng với z-index: Nó quá solo giản, thế nên đa số các developer sẽ không còn bỏ thời gian để đọc các rule của nó.

Mọi element trong 1 trong các HTML hoàn toàn có thể ở phía trước giỏi phía sau các element khác trong document. Đây được call là đồ vật tự xếp lớp (stacking order).

Xem thêm: Bảng Mã Lỗi Điều Hòa Samsung Inverter Và Thường, Bảng Mã Lỗi Điều Hòa Trung Tâm Samsung

Thứ nhất, khi chưa tính mang lại 2 thuộc tính z-index và position, chỉ bao gồm một quy lao lý khá solo giản: sản phẩm công nghệ tự xếp lớp chính là thứ tự mở ra trong HTML

Thứ hai, khi tính tới ở trong tính position, thì lúc ấy mọi element được gán position (và cả các element con của nó) đều lộ diện phía trước bất kì một element ko gán position (Ví dụ như các thuộc tính sau nhằm z-index có tác dụng: absolute, fixed hay relative)

Thứ ba, ta hoàn toàn có thể coi như element nào có giá trị z-index cao hơn vậy thì sẽ đứng trước element có mức giá trị z-index phải chăng hơn. Nghe dễ dàng nhưng thực ra có tương đối nhiều quy tắc hơn thế:

z-index chỉ chạy đối với element nào gồm gán position.z-index rất có thể tạo ra stacking context.

Stacking Contexts


9 CSS animation bắt đầu "mãn nhãn" cho những project

Một nhóm các element tất cả chung một element phụ thân sẽ cùng dịch chuyển chung cùng nhau trong stacking order, tạo cho khái niệm điện thoại tư vấn là stacking context. Việc hiểu biết về stacking context chính là chìa khóa nhằm hiểu trọn vẹn về bí quyết z-index với stacking order hoạt động.

Mỗi một stacking context sẽ có 1 HTML element là element nơi bắt đầu (root element). Lúc 1 stacking context gắn với một element, nó vẫn liên kết tất cả các element bé vào 1 vị trí thắt chặt và cố định trong stacking order. Điều đó tức là nếu 1 element nằm trong một stacking context nằm ở dưới thuộc của stacking order, sẽ không tồn tại cách nào tạo cho nó mở ra phía trước một element nằm trong một stacking context tất cả vị trí cao hơn trong stacking order, ngay cả nếu phối z-index của nó tới 9999 !

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

Khi một element là nơi bắt đầu của document (thẻ )Khi một element có mức giá trị position được set khác với static và z-index khác autoKhi một element có mức giá trị opacity nhỏ hơn 1

Cập nhật: bên cạnh opacity, một vài property CSS mới hiện giờ cũng có thể tạo stacking context. Bọn chúng bao gồm transforms, filters, css-regions, paged media… Như một luật pháp chung, chính là nếu như một property CSS yêu ước render trong một offscreen context, nó sẽ tạo ra một stacking context mới.

Xem thêm: So Sánh Honda Air Blade 125 Màu Đen Nhám Và Sơn Từ Tính Có Tác Dụng Gì ?

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

z-index là một tính chất hay tạo nhức đầu so với developer bắt đầu làm quen CSS. Tuy nhiên nếu cầm cố bắt tốt về stacking order , stacking context, position và phần đông thuộc tính rất có thể khiến stacking context “mở nhánh” như opacity, thì đang phần nào đang tiện code cấp tốc hơn vào tương lai. Mà tốt nhất là vừa gọi vừa thực hành thực tế mới nhớ, chứ đọc không sẽ bị loạn não.