z-index vào css

z-index trong css gồm phương pháp vận động là từng element bên trên trang web được hiển thị ngang cùng dọc theo 2 trục x cùng y, hiển thị sản phẩm tự ông xã lấn theo trục z. Nói đơn giản và dễ dàng hơn vậy thì z-index càng cao thì element kia đứng trước cùng tồn tại bên trên.

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

*
*
*
*
*

Nói tới đây là vượt đầy đủ nhằm các bạn đọc về z-index vào css  các nằm trong tính đi kèm nhằm code. Còn ý muốn đọc sâu rộng, mời chúng ta đi tiếp xuống phần dưới đây.

Stacking Order

Đây là một trong những trong số những vấn đề cùng với z-index: Nó thừa đơn giản và dễ dàng, thế nên phần lớn các developer sẽ không vứt thời hạn nhằm phát âm những rule của nó.

Mọi element vào một trong HTML rất có thể sống vùng trước hay phía sau các element không giống trong document. Đây được call là máy từ bỏ xếp lớp (stacking order).

Xem thêm: Khái Niệm Về Văn Miêu Tả Là Gì ? Các Thể Loại Văn Miêu Tả Thường Gặp

Thứ nhất, Khi không tính mang đến 2 nằm trong tính z-index và position, chỉ tất cả một quy lý lẽ hơi đối chọi giản: đồ vật trường đoản cú xếp lớp chính là lắp thêm từ bỏ mở ra vào HTML

Thứ đọng hai, Khi tính tới nằm trong tính position, thì lúc ấy hồ hết element được gán position (cùng cả các element bé của nó) những xuất hiện thêm vùng trước bất kì một element ko gán position (ví dụ như nlỗi các thuộc tính sau để z-index có tác dụng: absolute, fixed hay relative)

Thđọng ba, ta rất có thể coi nlỗi element như thế nào có giá trị z-index cao hơn vậy thì đã đứng trước element có giá trị z-index rẻ hơn. Nghe đơn giản dễ dàng cơ mà thực chất có không ít luật lệ rộng thế:

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

Stacking Contexts


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

Một đội những element có tầm thường một element phụ thân sẽ thuộc di chuyển tầm thường cùng nhau trong stacking order, tạo nên quan niệm gọi là stacking context. Việc đọc biết về stacking context chính là chìa khóa nhằm gọi trọn vẹn về cách z-index với stacking order hoạt động.

Mỗi một stacking context vẫn có 1 HTML element là element nơi bắt đầu (root element). lúc một stacking context thêm với cùng một element, nó đã links tất cả các element bé vào 1 địa điểm thắt chặt và cố định vào stacking order. Điều kia Tức là giả dụ 1 element nằm trong 1 stacking context nằm tại vị trí bên dưới cùng của stacking order, đã không có phương pháp nào tạo cho nó mở ra phía đằng trước một element nằm trong một stacking context bao gồm địa chỉ cao hơn nữa vào stacking order, ngay cả ví như phối z-index của chính nó tới 9999 !

Một stacking context rất có thể được thêm với 1 element bằng một trong các 3 cách:

lúc một element là nơi bắt đầu của document (thẻ )lúc một element có giá trị position được mix không giống với static và z-index khác autoKhi một element có mức giá trị opacity bé dại hơn 1

Cập nhật: Bên cạnh opathành phố, một vài property CSS mới hiện nay cũng rất có thể tạo stacking context. Chúng bao gồm transforms, filters, css-regions, paged media… Nlỗi một chế độ thông thường, đó là giả dụ như 1 property CSS kinh nghiệm render vào một offscreen context, nó sẽ tạo ra một stacking context bắt đầu.

Tóm lại z-index vào css

z-index là 1 đặc điểm tốt tạo nhức đầu so với developer new làm cho quen thuộc CSS. Tuy nhiên trường hợp nắm bắt tốt về stacking order , stacking context, position và đầy đủ thuộc tính rất có thể khiến cho stacking context “mnghỉ ngơi nhánh” như opathành phố, thì đã phần làm sao đã luôn thể code nkhô cứng rộng về sau. Mà rất tốt là vừa gọi vừa thực hành thực tế bắt đầu ghi nhớ, chđọng phát âm không sẽ ảnh hưởng loàn não.

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 *