Cách sử dụng z index trong css, z index trong css là gì

Khi xây dựng các trang web, bọn họ thường muốn xếp các thành phần không giống nhau lên nhau để tạo thành các kiến tạo và giao diện đẹp mắt. Mặc dù nhiên, trường hợp hai phần tử chồng lên nhau, làm biện pháp nào chúng ta có thể kiểm soát lắp thêm tự của các phần tử? Câu trả lời là áp dụng thuộc tính z-index trong css. Trực thuộc tính z-index là một trong những thuộc tính đặc biệt trong CSS, nó có thể chấp nhận được sắp xếp thiết bị tự những thành phần trên trang web. Trong bài viết này, bọn họ sẽ trao đổi về ý nghĩa của nằm trong tính z-index vào CSS, một số trong những mẹo với cách áp dụng thuộc tính này trong số dự án.

Bạn đang xem: Cách sử dụng z index trong css

1. Tổng quan lại về z-index vào css

1.1. Z-index trong css là gì?

Z-index vào css là trực thuộc tính xác định thứ tự các thành phần HTML. Trong đó, các phần tử HTML có chỉ số tốt hơn sẽ tiến hành đặt xuống bên dưới các thành phần HTML có chỉ số cao hơn.

Lưu ý: z-index chỉ gồm thể vận động trên các phần tử được khai báo thuộc tính vị trí "position" lấy một ví dụ (position:absolute, position:relative, or position:fixed).

Ví dụ về cú pháp z-index

/*Giá trị trường đoản cú khóa vào z-index*/

z-index: auto; /*Giá trị tự động là giá trị tự động sắp xếp những elements ông chồng lên nhau theo vật dụng tự khoác định trong HTML*/

z-index: 0;

z-index: 2;

z-index: 287;

z-index: -1; /*Giá trị -1 trong z-index là giá bán trị gồm độ ưu tiên tốt nhất*/

z-index: initial; /* quý hiếm này lúc khai báo nó sẽ trở nên giá trị mang định ko thể cố đổi*/

z-index: inherit; /*Giá trị vượt kế, khi element cha khai báo nằm trong tính z-index tiếp đến element con sẽ thừa kế lại giá trị z-index của element cha*/

z-index: revert-layer; /*Giá này cho phép khôi phục lại giao diện giá trị thuở đầu của những element xếp ông xã lên nhau*/

z-index: revert; /*Giá trị này khác với “revert-layer” vị nó chỉ có thể chấp nhận được khôi phục lại giá chỉ trị thuở đầu của element mà nó được khai báo*/

z-index: unset;/*Khi khai làm giá trị này element đó được xem như gồm z-index ở quý hiếm mặc định*/

1.2. Cách quản lý của z-index vào css

Z-index trong css quản lý và vận hành như sau: Mỗi bộ phận trên website sẽ được sắp xếp theo hướng ngang cùng dọc tương xứng với 2 trục x-axis lộ diện từ trái sang buộc phải (left-to-right) và y-axis lộ diện từ bên trên xuống (top-to-bottom), trục z-axis vẫn hiển thị các phần tử xếp ck lên giữa trục x-axis với trục y-axis. Z-index càng cao thì cường độ ưu tiên càng phệ và sẽ tiến hành xếp lên trước các phần tử khác

Nếu tất cả 4 thành phần (element) xuất hiện trên trang chồng chéo cánh lên nhau và không tồn tại giá trị z-index như thế nào được khai báo (hoặc cả 4 phần tử “element” bao gồm cùng quý giá z-index), thì phần tử “element” xuất hiện thêm ở cuối vào mã HTML tính từ cần sang trái như trên hình ví dụ phía bên trên sẽ đứng trên phần tử “element” được đặt trước tính từ đề nghị sang trái trong mã HTML.

1.3. Một số trong những ví dụ về nằm trong tính z-index trong css

Để dễ tưởng tượng hơn về ở trong tính này, chúng ta cùng xem thêm đoạn code sau đây:

Chắc hẳn các bạn đã từng nỗ lực đặt z-index mang đến element tuy nhiên lại ko có hiệu quả như mong muốn đợi. Đây là một thuộc tính tưởng chừng dễ dàng nhưng đôi khi lại hơi là confuse. Bài viết này sẽ giải thích rõ hơn về cách mà z-index hoạt động.

Thứ tự stacking mang định

Trước tiên ta cùng chu đáo thứ tự mặc định mà lại trình duyệt ck element lên nhau trường đoản cú sau lên trước:

Element root () dưới cùng
Non-positioned elements (static) theo thứ tự code từ trên xuống dưới với đè lên element root
Positioned elements (absolute, relative, sticky, fixed) theo máy tự code từ trên xuống dưới và đè lên non-positioned elements

Ví dụ:

HTML

CSS

/* Để coi full CSS, click liên kết bên dưới*/.blue, .pink, .orange position: absolute;https://codepen.io/ivhed/pen/Qrd
EBB

Có thể thấy rằng block green tuy nhiên có div nằm dưới cùng theo thứ tự từ trên xuống nhưng vày không được position nên đã bị những block được position không giống đè lên.

Stack với z-index

Để biến đổi thứ tự đè lên trên nhau mặc định như bên trên ta có thể sử dụng đến thuộc tính z-index. Element với z-index cao hơn sẽ hiển thị đè lên trên element tất cả z-index tốt hơn. Cũng cần lưu ý rằng z-index chỉ có chức năng với hồ hết element đã có được position.

HTML

CSS

.blue, .pink, .orange position: absolute;.blue z-index: 2;/* phối z-index của block orange cao hơn block blue để hiện nay thị đè lên trên block xanh */.orange z-index: 3;.green z-index: 100; /* ko có tính năng */https://codepen.io/ivhed/pen/xjqmp
V

Stacking context

Giả sử ta mong mỏi thêm một block purple nằm dưới block pink.

Xem thêm: Cách seo fanpage - 15 cách seo facebook từ a

HTML

CSS

.blue, .pink, .orange, .purple position: absolute;.purple z-index: 0;/* phối z-index của block pink cao hơn block purple nhằm hiện thị đè lên block purple */.pink z-index: 1;.blue z-index: 2;.orange z-index: 3;.green z-index: 100;https://codepen.io/ivhed/pen/YLZdjx

Bằng việc đặt z-index của block purple thấp rộng z-index của block pink, block purple đang nằm dưới block pink. Mà lại chuyện gì đã xảy ra khi block color cam lại bị đè bên dưới block blue color da trời? Đây là 1 trong bug phân phát sinh cơ mà ta không thể mong muốn.

Vâng, vì sao là khi ta đặt z-index mang đến block pink, ta đã tạo nên một thứ gọi là stacking context. Z-index của một element chỉ có chức năng trong phạm vi của stacking context bao gồm element đó. Z-index của block orange chỉ có tác dụng trong stacking context vày block pink tạo ra vậy nên mặc dù nó cao hơn z-index của block xanh thì block orange vẫn bị block xanh đè lên bởi vì 2 block này không giống stacking context.

Để block xanh nằm bên dưới block orange ta rất có thể làm đến chúng bao gồm cùng một stacking context bằng cách đặt div .blue nghỉ ngơi trong div .pink.

HTML

https://codepen.io/ivhed/pen/er
Go
JE

Ngoài trực thuộc tính z-index thì lúc đặt một số thuộc tính khác cho element ta cũng tạo nên một stacking context new ví dụ: filter, opacity, transform… chúng ta có thể tham khảo thêm ở đây.

Quay lại cùng với ví dụ trước lúc mà div .blue đồng bậc với div .pink.Lần này thay vì đặt z-index mang lại block pink ta đã thử đặt thuộc tính filter cho block này xem sao.

HTML

CSS

.blue, .pink, .orange position: absolute;/* mix filter mang đến block pink để sinh sản một stacking context bắt đầu */.pink filter: hue-rotate(20deg);.blue z-index: 2;/* z-index của block orange chỉ có công dụng trong stacking context nhưng mà block pink tạo ra nên tuy nhiên được set cao hơn nữa của block xanh nó vẫn bị block xanh đè lên */.orange z-index: 3;.green z-index: 100;https://codepen.io/ivhed/pen/Lm
WMQb

Vâng cùng đúng như dự kiến block orange đã trở nên block xanh đè lên.

Kết luận

Khi muốn apply z-index cho một element bạn phải position đến element đó, đồng thời xác minh được stacking context của các element nhằm điều chỉnh làm sao cho hiển thị được như hy vọng đợi. Cảm ơn các bạn đã theo dõi.