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";

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> 

Kết quả là:

Loạt bài hướng dẫn Học CSS cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: TutorialspointW3Schools

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.


tong_hop_thuoc_tinh_trong_css.jsp