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à:
Công cụ giáo viên (2048.VN)
Tạo- trộn đề thi miễn phí từ file PDF, Word, Giao bài nhanh chóng, Hoàn toàn Free
Bài học CSS phổ biến khác tại vietjack.com:
Dành cho bạn
Công cụ giáo viên
- Tạo đề online từ PDF / Word
- Trộn nhiều mã đề, in Offline
- Giao bài online, Quản lí lớp học
