Thuộc tính z-index trong CSS – lý thuyết và thực hành

Thuộc tính z-index dùng để chỉ thị thứ bậc của các lớp thẻ trong HTML. Nói một cách đơn giản, nếu các thẻ là các trang giấy thì số thứ tự của trang chính là chỉ số z-index, làm cho trang này ở trước trang kia.

z-index luôn đi kèm với thuộc tính position. Trong ví dụ minh họa ở trên, tôi có nói về các trang sách, nó không hoàn toàn đúng hẳn, vì ở sách, trang nào có số lớn thì nằm dưới, nhưng với z-index, thẻ HTML nào có trị số lớn thì nằm lên trên – tức là gần mắt hơn.

Trị số của z-index phải là số nguyên, dương hoặc âm. Nếu chúng ta không quy định giá trị cụ thể của z-index thì nó mặc định là 0, và trong trang HTML khi đó, theo thứ tự từ trên xuống dưới của các dòng code, các thẻ ở dưới sẽ xếp phía trên. Ví dụ:

 
 
 

Code mẫu của đoạn trên:

<div style="height: 280px; margin: 20px; position: relative;">

<div style="background-color: blue; height: 200px; left: 0px; position: absolute; top: 0px; width: 200px;"></div>

<div style="background-color: black; height: 200px; left: 40px; position: absolute; top: 40px; width: 200px;"></div>

<div style="background-color: red; height: 200px; left: 80px; position: absolute; top: 80px; width: 200px;"></div>

</div>

Tôi không viết ra giá trị cụ thể của z-index, do vậy các thẻ ở dưới sẽ xếp lên trên, căn cứ vào đoạn code trên thì đó chính là hộp màu đỏ.

Giờ tôi sẽ để hộp màu đen xếp lên trên cùng, hộp màu xanh ở vị trí thứ hai, và hộp màu đỏ ở vị trí cuối cùng, để làm được việc đó, tôi sẽ thêm z-index vào và để giá trị lớn hơn cho hộp cần xếp ở vị trí cao.

Code mẫu:

<div style="height: 280px; margin: 20px; position: relative;”>

<div style="background-color: blue; height: 200px; left: 100px; position: absolute; top: 0px; width: 200px; z-index: 2;"></div>

<div style="background-color: black; height: 200px; left: 40px; position: absolute; top: 40px; width: 200px; z-index: 3;"></div>

<div style="background-color: red; height: 200px; left: 140px; position: absolute; top: 80px; width: 200px; z-index: 1;"></div>

</div>

Các dòng code vẫn giữ nguyên thứ tự, tuy nhiên tôi có dịch các hộp sang trái và phải đôi chút để bạn dễ quan sát các lớp.

Để thẻ nào đó luôn xếp ở vị trí cao nhất, chúng ta thường để z-index của nó thật cao, chẳng hạn z-index: 10; ví dụ các thanh trượt dọc dùng để like và share ta hay để z-index giá trị cao.

Giờ chúng ta sẽ thực hành về z-index theo đề bài như sau: tôi muốn một hình ảnh, mà khi hover qua nó sẽ đổi thành ảnh khác.

Ý tưởng giải yêu cầu trên:

  • Tôi sẽ tạo 2 ảnh ở cùng một vị trí và xếp chồng chúng lên nhau, ảnh có z-index cao sẽ ở trên.
  • Khi tôi hover qua ảnh, thì tôi sẽ thay đổi giá trị z-index để ảnh dưới sẽ xếp lên trên.

Code mẫu:

CSS:

div {
position:relative;
height:252px;
}
img {
position:absolute;
}
#tren:hover {
z-index:-1;
}
#duoi:hover {
z-index:1;
}

HTML:

<div id="zindex">
<img src="https://cdn.kiencang.net/wp-content/uploads/2021/02/chim.jpg" id="duoi"/>
<img src="https://cdn.kiencang.net/wp-content/uploads/2021/02/thanh-pho.jpg" width="380" height="251" id="tren">
</div>

Kết quả:

Thông tin cuối cùng: Có bạn hỏi, sao lại để là z-index mà không phải a-index hay b-index? Sở dĩ là z, vì nó đại diện cho chiều sâu trên trục tọa độ 3 chiều x, y, z. Còn index dịch ra tiếng Việt là chỉ số, vậy z-index, hiểu cách nôm na là chỉ số theo chiều sâu.

Leave a Comment