CSS Z-index

Summary

• Nếu không set z-index trình duyệt sẽ tự động set, phần tử sau đè lên phần tử trước.
• Khi define z-index, ta đã tạo ra 1 stacking context. z-index sẽ chỉ có hiệu quả với các phần tử cùng cấp, chứ không vượt ra ngoài, ảnh hưởng tới stacking context khác được.

Z-index

• Nếu không set z-index, trình duyệt sẽ tự động “đoán” theo thứ tự và hiển thị tương ứng khi các phần tử đè lên nhau (ví dụ set margin-top: -100px).

• Trong normal flow, nếu bạn set z-index mà nó không hoạt động, thì cần phải set position thành bất cứ giá trị nào ngoài static cho phần tử đó.

• Trong 1 grid context, chúng ta có thể thay đổi z-index mà không cần add position: relative.

• Nếu cả element cha và các element con đều để position: relatve, lúc này, position không phải là static, mà z-index cũng không phải auto, nên cụm này sẽ thành stacking context. Lúc này dù ta có set z-index của element con thành -999 thì nó cũng không xuất hiện phía sau phần tử cha.

Stacking Context

A stacking context is a group of elements that have a common parent and move up and down the z axis together.

Nói dễ hiểu thì 1 nhóm các phần tử con, nằm cùng trong 1 element cha, được set z-index, thì sẽ tạo ra một Stacking Context.

Các phần tử con này sẽ chỉ di chuyển up/down theo trục z với nhau được.

Nếu phần tử cha cũng set position: relative và z-index: xxx, nó có thể sẽ tạo ra 1 stacking context mới. Các phần tử con dù thay đổi z-index: -9999 cũng chỉ có thể nằm trong stacking context với sibling elements thôi, không thể “thoát” ra ngoài và nằm sau phần tử cha được.

z-index của tất cả các phần tử con, chỉ dùng để so sánh với nhau thôi =)) chứ không vượt ra ngoài in đè lên child elements của stacking context khác :D