Dđè

Chắc hẳn các bạn đã từng cố gắng đặt z-index cho element tuy nhiên lại không có kết quả như mong đợi. Đây là một thuộc tính tưởng chừng đơn giản nhưng đôi khi lại khá 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.

Bạn đang xem: Dđè

Thứ tự stacking mặc định

Trước tiên ta cùng xem xét thứ tự mặc định mà trình duyệt chồng element lên nhau từ sau lên trước:

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

Ví dụ:

HTML

CSS

/* Để xem full CSS, click link bên dưới*/.blue, .pink, .orange { position: absolute;}https://codepen.io/ivhed/pen/QrdEBB

*

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

Stack với z-index

Để thay đổi thứ tự đè lên nhau mặc định như 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 element có z-index thấp hơn. Cũng cần lưu ý rằng z-index chỉ có tác dụng với những element đã được position.

Có thể bạn quan tâm:  Bài tập trắc nghiệm cực trị của hàm số violet

HTML

CSS

.blue, .pink, .orange { position: absolute;}.blue { z-index: 2;}/* Set z-index của block orange cao hơn block blue để hiện thị đè lên block blue */.orange { z-index: 3;}.green { z-index: 100; /* không có tác dụng */}https://codepen.io/ivhed/pen/xjqmpV

*

Stacking context

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

HTML

CSS

.blue, .pink, .orange, .purple { position: absolute;}.purple { z-index: 0;}/* Set z-index của block pink cao hơn block purple để 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 hơn z-index của block pink, block purple đã nằm dưới block pink. Nhưng chuyện gì đã xảy ra khi block màu cam lại bị đè dưới block màu xanh da trời? Đây là một bug phát sinh mà ta không hề mong muốn.

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

Xem thêm: Trọn Bộ Bài Tập Tiếng Anh Lớp 9 Thi Diem Theo Từng Unit Có Đáp Án Violet

Để block blue nằm dưới block orange ta có thể làm cho chúng có cùng một stacking context bằng cách đặt div .blue ở trong div .pink.

Có thể bạn quan tâm:  Báo cáo skkn: một số biện pháp giúp học sinh lớp 4 có khả năng giải tốt các bài toán có lời văn

HTML

https://codepen.io/ivhed/pen/erGoJE

*

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

Quay lại với ví dụ trước khi mà div .blue ngang hàng với div .pink.Lần này thay vì đặt z-index cho block pink ta sẽ thử đặt thuộc tính filter cho block này xem sao.

HTML

CSS

.blue, .pink, .orange { position: absolute;}/* Set filter cho block pink để tạo một stacking context mới */.pink { filter: hue-rotate(20deg);}.blue { z-index: 2;}/* z-index của block orange chỉ có tác dụng trong stacking context mà block pink tạo ra nên mặc dù được set cao hơn của block blue nó vẫn bị block blue đè lên */.orange { z-index: 3;}.green { z-index: 100;}https://codepen.io/ivhed/pen/LmWMQb

*

Vâng và đúng như dự đoán block orange đã bị block blue đè lên.

Xem thêm: Trọn Bộ Đầy Đủ Các Chủ Điểm Ngữ Pháp Tiếng Anh 6 Thí Điểm Ngữ Pháp Tiếng Anh 6

Kết luận

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

Chuyên mục: Đề Thi

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 *