Thuộc tính z-index thiết lập thứ tự xếp chồng nhau của một thành phần vị trí. tag { z-index: giá trị; }

Danh ngôn cuộc sống:

• Bài viết được đăng bởi: Mr. Phan Nhan
• Ngày cập nhật bài viết: 12/05/2016
• Tổng lược xem trang: 126 / 1 khách
• Đánh giá bởi người dùng:

Định nghĩa và sử dụng. Thuộc tính z-index thiết lập thứ tự xếp chồng nhau của một thành phần vị trí. Thứ tự chồng nhau được sắp xếp dựa theo giá trị số, thành phần HTML nào có chỉ số z-index cao hơn sẽ nằm trên, ngược lại sẽ nằm dưới, giá trị mặc định là 0 (có thể sử dụng số âm) giá trị tốt nhất là không sử dụng đơn vị. Chú ý: z-index chỉ làm việc cùng với thuộc tính position. Cấu trúc:

tag {
z-index: giá trị;
}

Với giá trị như sau:
z-index: auto; Tự động sắp xếp thứ tự chồng nhau cho thành phần, đây là dạng mặc định.
z-index: 10; Sắp xếp thứ tự chồng nhau cho thành phần theo giá trị.
z-index: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).
CSS viết:

div {
position: relative;
}
p.element01 {
background: red;
height: 50px;
left: 30px;
position: absolute;
top: 30px;
width: 200px;
z-index: 1;
}
p.element02 {
background: blue;
height: 50px;
left: 30px;
position: absolute;
top: 30px;
width: 200px;
}

HTML viết:

<html>
<head></head>
<body>
<div>
<p class="element01">Thành phần 01</p>
<p class="element02">Thành phần 02</p>
</div>
</body>
</html>

1. Ví dụ thêm về z-index 3 thành phần (1 nằm dưới 2, 2 nằm dưới 3).

<html>
<head>
<style type="text/css">
div {
position: relative;
}
div p.exZIndex02 {
position: absolute;
top: 50px;
left: 50px;
}
div p.exZIndex03 {
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>

<body>
<div>
<p class="exZIndex01"><img src="/photos/demo01.gif" alt="1" /></p>
<p class="exZIndex02"><img src="/photos/demo02.gif" alt="2" /></p>
<p class="exZIndex03"><img src="/photos/demo03.gif" alt="3" /></p>
</div>
</body>
</html>

2. Ví dụ thêm về z-index 3 thành phần (1 nằm dưới 2, 2 nằm trên 3).

3. Ví dụ thêm về z-index 3 thành phần (1 nằm trên 2, 2 nằm trên 3).

Những bài viết được đăng mới nhất.

» Công cụ xóa dấu Tiếng việt