Chỉ số z là gì? Z-index là một thuộc tính CSS cho phép bạn định vị các phần tử HTML trong các lớp chồng lên nhau. Thoạt nghe thì có vẻ đơn giản, nhưng thực sự thì rất đơn giản.
Có một số quy tắc kỳ lạ, không trực quan có thể khiến nó không hoạt động theo cách bạn muốn– ngay cả khi bạn đặt z-index thành 999999!
Bài viết này sẽ giải thích chi tiết bốn lý do phổ biến nhất khiến z-index không hoạt động cho bạn. Bạn sẽ học cách sử dụng CSS để đưa các phần tử lên phía trước hoặc phía sau các phần tử khác.
> 1. Các phần tử trong cùng một ngữ cảnh xếp chồng sẽ hiển thị theo thứ tự xuất hiện, với các phần tử sau nằm trên các phần tử cũ.Trong ví dụ đầu tiên của chúng tôi, chúng tôi có một bố cục tương đối đơn giản bao gồm 3 yếu tố chính:
- Hình ảnh một con mèo
- Một khối màu trắng với văn bản
- Một hình ảnh khác về cùng một con mèo
Đây là đánh dấu HTML cho điều đó:
<div class="cat-top"></div>
<div class="content__block">
Meow meow meow...
</div>
<div class="cat-bottom"></div>Trong bố cục này, lý tưởng nhất là chúng tôi muốn khối văn bản màu trắng ở trên cả hai con mèo.
Để cố gắng đạt được điều này, chúng tôi đã thêm một số lề âm vào CSS cho cả hai hình ảnh mèo, để chúng chồng lên khối màu trắng một chút:
.cat-top {
margin-bottom: -110px;
}
.cat-bottom {
float: right;
margin-top: -120px;
}Tuy nhiên, nó trông như thế này:
Xem Pen Z-index:# 1:đặt vị trí, # 2:thứ tự xếp chồng tự nhiên, # 3:Thuộc tính CSS của Jessica (@thecodercoder) trên CodePen.
Con mèo đầu tiên thực sự được đặt bên dưới khối nội dung màu trắng, giống như chúng ta muốn. Nhưng hình ảnh con mèo thứ hai được đặt ở trên cùng của khối!
Tại sao điều này lại xảy ra?
Lý do cho hành vi này là do trật tự xếp chồng tự nhiên trên trang web. Các nguyên tắc này về cơ bản xác định yếu tố nào sẽ ở trên cùng và yếu tố nào sẽ ở dưới cùng.
Ngay cả khi các phần tử không có bộ chỉ mục z của chúng, thì vẫn có một vần điệu và lý do để những phần tử đó đứng đầu.
Trong trường hợp của chúng tôi, không có phần tử nào có giá trị z-index. Vì vậy thứ tự xếp chồng của chúng được xác định bởi thứ tự xuất hiện của chúng. Theo quy tắc này, các phần tử đến sau trong đánh dấu sẽ nằm trên các phần tử đứng trước chúng.
(Bạn có thể đọc thêm hướng dẫn về thứ tự xếp chồng tại Mạng nhà phát triển Mozilla tại đây.)
Trong ví dụ của chúng tôi với những con mèo và khối màu trắng, chúng đang tuân theo quy tắc này. Đó là lý do tại sao con mèo đầu tiên nằm bên dưới phần tử khối màu trắng và khối màu trắng nằm bên dưới con mèo thứ hai.
Được rồi, thứ tự xếp chồng đều ổn, nhưng chúng ta phải sửa CSS như thế nào để con mèo thứ hai nằm bên dưới khối màu trắng?
Hãy xem lý do thứ hai:
2. Phần tử chưa được đặt vị trí của nó
Một trong những nguyên tắc khác xác định thứ tự xếp chồng là liệu một phần tử có được đặt vị trí của nó hay không.
Để đặt vị trí cho một phần tử, hãy thêm CSS position thuộc tính bất kỳ thứ gì khác ngoài static , như relative hoặc absolute . (Bạn có thể đọc thêm về nó trong bài viết này mà tôi đã viết.)
Theo quy tắc này, các phần tử được định vị sẽ hiển thị trên các phần tử không được định vị.
Vì vậy, đặt khối màu trắng thành position: relative và để nguyên hai phần tử mèo không định vị trí sẽ đặt khối màu trắng lên đầu các con mèo theo thứ tự xếp chồng.
Đây là cách nó trông - bạn cũng có thể thử với Codepen ở trên.
Tuyệt vời!
Bây giờ, điều tiếp theo chúng tôi muốn làm là xoay ngược con mèo dưới cùng, sử dụng transform bất động sản. Bằng cách đó, cả hai con mèo sẽ ở bên dưới khối màu trắng, chỉ có đầu nhô ra ngoài.
Nhưng làm như vậy có thể gây ra nhiều z-index -sự nhầm lẫn liên quan. Chúng tôi sẽ giải quyết vấn đề và giải pháp trong phần tiếp theo.
3. Việc đặt một số thuộc tính CSS như độ mờ hoặc biến đổi sẽ đặt phần tử trong bối cảnh xếp chồng mới.
Như chúng tôi vừa đề cập, chúng tôi muốn lật ngược con mèo phía dưới. Để thực hiện điều này, chúng tôi sẽ thêm transform: rotate(180deg) .
.cat-bottom {
float: right;
margin-top: -120px;
transform: rotate(180deg);
}Nhưng điều này làm cho con mèo dưới cùng được hiển thị trên đầu của khối màu trắng một lần nữa!
Chuyện quái gì đang xảy ra ở đây vậy ??
Bạn có thể không gặp phải vấn đề này thường xuyên, nhưng một khía cạnh khác của thứ tự xếp chồng là một số thuộc tính CSS như transform hoặc opacity sẽ đặt phần tử vào ngữ cảnh xếp chồng mới của riêng nó.
Điều này có nghĩa là thêm transform vào .cat-bottom phần tử làm cho nó hoạt động như thể nó có z-index của 0. Mặc dù nó không có position hoặc z-index thiết lập ở tất cả! (W3.org có một số tài liệu giàu thông tin nhưng khá dày đặc về cách thức hoạt động của tính năng này với opacity tài sản)
Hãy nhớ rằng chúng tôi chưa bao giờ thêm z-index giá trị đối với khối màu trắng, chỉ position: relative . Điều này là đủ để đặt khối màu trắng lên trên những con mèo không định vị.
Nhưng kể từ khi .bottom-cat phần tử đang hoạt động như thể nó được định vị tương đối với z-index: 0 , việc biến đổi nó đã định vị nó ở trên cùng của khối màu trắng.
Giải pháp cho việc này là đặt position: relative và đặt z-index một cách rõ ràng trên ít nhất là khối màu trắng. Bạn có thể tiến thêm một bước nữa và đặt position: relative và z-index thấp hơn về các yếu tố mèo, chỉ để thêm an toàn.
.content__block {
position: relative;
z-index: 2;
}
.cat-top, .cat-bottom {
position: relative;
z-index: 1;
}Theo ý kiến của tôi, làm điều này sẽ giải quyết được hầu hết, nếu không phải là tất cả các vấn đề cơ bản hơn về chỉ số z.
Bây giờ, hãy chuyển sang lý do cuối cùng của chúng tôi là z-index của bạn không hoạt động. Cái này phức tạp hơn một chút, vì nó liên quan đến các phần tử cha và con.
4. Phần tử ở trong ngữ cảnh xếp chồng thấp hơn do cấp z-index của phần tử gốc của nó
Hãy xem ví dụ mã của chúng tôi cho điều này:
Xem Pen Z-index:# 4 bối cảnh xếp chồng khác nhau của Jessica (@thecodercoder) trên CodePen.
Đây là những gì chúng tôi có:một trang web đơn giản với nội dung thông thường và một tab bên màu hồng cho biết “Gửi phản hồi” được đặt ở đầu nội dung.
Sau đó, khi bạn nhấp vào ảnh con mèo, một cửa sổ phương thức với lớp phủ nền màu xám trong suốt sẽ mở ra.
Tuy nhiên, ngay cả khi cửa sổ phương thức đang mở, tab bên vẫn nằm trên lớp phủ màu xám. Chúng tôi muốn lớp phủ được hiển thị trên mọi thứ, bao gồm cả tab bên.
Hãy xem qua CSS cho các phần tử được đề cập:
.content {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
z-index: 100;
}
.side-tab {
position: fixed;
z-index: 5;
}
Tất cả các phần tử đều được đặt vị trí và tab bên có z-index trong số 5, vị trí của nó trên đầu phần tử nội dung, ở z-index: 1 .
Sau đó, phương thức có z-index: 100 cái nào nên đặt nó trên đầu tab bên tại z-index: 5 . Nhưng thay vào đó, lớp phủ phương thức nằm bên dưới tab bên.
Tại sao điều này lại xảy ra?
Trước đây, chúng tôi đã giải quyết một số yếu tố đi vào ngữ cảnh xếp chồng, chẳng hạn như liệu phần tử có được đặt vị trí hay không cũng như thứ tự của nó trong đánh dấu.
Tuy nhiên, một khía cạnh khác của ngữ cảnh xếp chồng là phần tử con bị giới hạn trong ngữ cảnh xếp chồng của chính nó.
Hãy xem xét kỹ hơn ba yếu tố được đề cập.
Đây là đánh dấu mà chúng tôi có:
<section class="content">
<div class="modal"></div>
</section>
<div class="side-tab"></div>Nhìn vào phần đánh dấu, chúng ta có thể thấy rằng các phần tử nội dung và tab bên là anh em ruột thịt. Có nghĩa là, chúng tồn tại ở cùng một mức trong đánh dấu (điều này khác với mức z-index). Và phương thức là một phần tử con của phần tử nội dung.
Vì phương thức nằm bên trong phần tử nội dung, z-index của nó của 100 chỉ có tác dụng bên trong phần tử nội dung mẹ của nó. Ví dụ:nếu có các phần tử con khác là anh chị em của phương thức, thì z-index của chúng các giá trị sẽ đặt chúng ở trên cùng hoặc bên dưới nhau.
Nhưng z-index giá trị của các phần tử con đó không có nghĩa bên ngoài phần tử gốc, bởi vì phần tử nội dung chính có z-index của nó đặt thành 1.
Vì vậy, con của nó, bao gồm cả phương thức, không thể thoát ra khỏi z-index đó cấp độ.
(Bạn có thể nhớ điều đó với phép ẩn dụ hơi buồn này:một đứa trẻ có thể bị giới hạn bởi cha mẹ của nó và không thể thoát khỏi chúng.)
Có một số giải pháp cho vấn đề này:
Giải pháp:Di chuyển phương thức ra bên ngoài nội dung gốc và vào ngữ cảnh xếp chồng chính của trang.
Đánh dấu đã sửa sau đó sẽ trông giống như sau:
<section class="content"></section>
<div class="modal"></div>
<div class="side-tab"></div>Bây giờ, phần tử phương thức là một phần tử anh em với hai phần tử khác. Điều này đặt tất cả ba yếu tố trong cùng một bối cảnh xếp chồng như chúng, vì vậy mỗi mức z-index của chúng giờ đây sẽ ảnh hưởng lẫn nhau.
Trong ngữ cảnh xếp chồng mới này, các phần tử sẽ hiển thị theo thứ tự sau, từ trên xuống dưới:
- modal (
z-index: 100) - tab bên (
z-index: 5) - nội dung (
z-index: 1)
Giải pháp Thay thế:Xóa định vị khỏi nội dung, vì vậy nó sẽ không giới hạn chỉ số z của phương thức.
Nếu bạn không muốn hoặc không thể thay đổi đánh dấu, bạn có thể khắc phục sự cố này bằng cách xóa position cài đặt từ phần tử nội dung:
.content {
// No position set
}
.modal {
position: absolute;
z-index: 100;
}
.side-tab {
position: absolute;
z-index: 5;
}
Vì phần tử nội dung hiện không được định vị, nó sẽ không còn giới hạn z-index của phương thức nữa giá trị. Vì vậy, phương thức mở sẽ được đặt trên đầu phần tử tab bên, do z-index cao hơn của nó trong tổng số 100.
Mặc dù điều này hoạt động hiệu quả, nhưng cá nhân tôi sẽ đi tìm giải pháp đầu tiên.
Bởi vì nếu vì lý do nào đó trong tương lai, bạn phải định vị phần tử nội dung, điều đó sẽ lại giới hạn thứ tự của phương thức trong ngữ cảnh xếp chồng.
Trong Tóm tắt
Tôi hy vọng rằng bạn thấy hướng dẫn này hữu ích! Tóm lại, hầu hết các vấn đề với z-index có thể được giải quyết bằng cách làm theo hai hướng dẫn sau:
- Kiểm tra xem các phần tử đã đặt vị trí và số chỉ số z theo đúng thứ tự chưa.
- Đảm bảo rằng bạn không có các phần tử gốc giới hạn
z-indextrình độ của con cái họ.
Tài nguyên:
- W3.org:Transparency:thuộc tính "opacity"
- W3.org:Chỉ định mức ngăn xếp
- Mạng nhà phát triển Mozilla:Bối cảnh xếp chồng
- PhilipWalton.com:Chưa ai nói gì với bạn về chỉ số Z
- Tạp chí Smashing:Thuộc tính CSS Z-index