Hôm nay mình sẽ giới thiệu với các bạn về z-index trong CSS.
Để tìm hiểu về Thuộc tính Z-index, mình xin đưa ra ví dụ về việc sử dụng CSS absolute position để xếp chồng các thành phần lên nhau:
Với giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| z-index | auto | 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. |
| Giá trị | z-index: 10; | Sắp xếp thứ tự chồng nhau cho thành phần theo giá trị. | |
| inherit | 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). |
Ví dụ: Sử dụng thuộc tính Z-index trong CSS:
– Trong file: bai1html.html ta gõ như sau:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body>
<div id=“wapper”>
<div class=“box1”>box1</div>
<div class=“box2”>box2</div>
<div class=“box3”>box3</div>
</div>
</body>
|
– Trong file: style.css ta định dạng sau:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
#wapper{
border:1px solid red;
width:300px;
height:300px;
position:relative;
}
.box1,.box2,.box3{
position:absolute;
width:150px;
height:150px;
border:1px solid green;
}
.box1{ top:20px; left:20px; background: green;}
.box2{ top:60px; left:60px; background: yellow;}
.box3{ top:100px; left:100px; background–color:#f66;
}
|
– Kết quả:
Chúc các bạn thành công!