Thuộc tính z-index trong CSS

Thuộc tính z-index trong CSS giúp bạn xác định mức độ chồng nhau (gọi tắt là Stack Level) của phần tử này so với phần tử kia. Bạn thử tưởng tượng rằng, việc hiển thị các phần tử dựa theo các lớp (các Layer). Thông thường, các phần tử sẽ hiển thị trên cùng một lớp, và việc hiển thị phần tử này không nằm đè lên nội dung hiển thị của phần tử khác.

Thuộc tính z-index có thể nhận giá trị:

auto: Stack Level của phần tử là như nhau và là giống như của phần tử cha.
integer: Stack Level được xác định theo giá trị đã cho. Phần tử có giá trị z-index cao hơn sẽ nằm đè lên các phần tử có giá trị z-index thấp hơn.

Thuộc tính z-index có thể áp dụng cho:

Tất cả các phần tử đã được xác định vị trí trong tài liệu.

Cú pháp thuộc tính z-index trong DOM

object.style.zindex = "1";

Quảng cáo

Ví dụ thuộc tính z-index trong CSS

Tiếp theo là ví dụ minh họa cách sử dụng của thuộc tính z-index trong CSS:

<html>
   <head>
   </head>
   
   <body>
      <div style="background-color:blue; width:300px; height:100px; position:relative; top:10px; left:80px; z-index:2">
      </div>
      
      <div style="background-color:yellow; width:300px; height:100px; position:relative; top:-60px; left:35px; z-index:1;">
      </div>
      
      <div style="background-color:red; width:300px; height:100px; position:relative; top:-220px; left:120px; z-index:3;">
      </div>
   </body>
   
</html>

Quảng cáo

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: