1. Nguyên lý hoạt động của vị trí – positionHãy tưởng tượng cửa sổ trình duyệt của bạn giống như một hệ tọa độ và với position bạn có thể đặt một đối tượng web ở bất cứ vị trí nào trên hệ tọa độ này.
Giả sử chúng ta muốn định vị một ảnh ở vị trí 70px cách đỉnh và 90px từ bên trái tài liệu, chúng ta sẽ viết CSS như sau:
1 img {
2 position:absolute;
3 top:70px;
4 left:90px
5 }
Như bạn đã thấy, sự định vị bằng CSS là một công nghệ chính xác để định vị một thành phần. Nó dễ dàng hơn so với việc dùng bảng, ảnh trong suốt hay bất kỳ thứ gì khác.
2. Vị trí tuyệt đối – Absolute position
Định vị tuyệt đối là sự định vị mà trong đó các thành phần được định vị không để lại bất cứ một khoảng trống nào trong tài liệu.
Một thành phần được định vị tuyệt đối sẽ nhận giá trị position là absolute. Các đối tượng đã định vị tuyệt đối sẽ dùng kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ.
Ví dụ sau sẽ chỉ cho chúng ta cách đặt bốn ảnh ở bốn góc tài liệu bằng định vị tuyệt đối.
01 #logo1 {
02 position:absolute;
03 top:50px;
04 left:70px
05 width:100px;
06 height:100px;
07 background:black;
08 }
09 #logo2 {
10 position:absolute;
11 top:0;
12 right:0;
13 width:100px;
14 height:100px;
15 background:green;
16 }
17 #logo3 {
18 position:absolute;
19 bottom:0;
20 left:0;
21 width:100px;
22 height:100px;
23 background:blue;
24 }
25 #logo4 {
26 position:absolute;
27 bottom:70px;
28 right:50px;
29 width:100px;
30 height:100px;
31 background:red;
32 }
3. Vị trí tương đối – Relative position
Sự định vị tương đối cho một thành phần là sự định vị được tính từ vị trí gốc trong tài liệu. Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài liệu. Các thành phần được định vị tương đối sẽ nhận giá trị position là relative.
Chúng ta hãy làm lại ví dụ trên nhưng thay absolute thành relative. Các bạn ghi nhận lại vị trí 4 ảnh logo lúc áp dụng thuộc tính position là none, absolute và relative rồi rút ra nhận xét.
Hai thuộc tính position và float mang lại cho trang web của bạn sự cơ động hơn các phương pháp dùng bảng hay ảnh trong
suốt.
4. Lớp/Chiều sâu – Z-Index
CSS hoạt động trên cả 3 chiều: cao, rộng, sâu. Chiều sâu được định nghĩa với thuộc tính z-index, thuộc tính này giúp bạn đặt một thành phần này lên trên một thành phần khác. Với mục đích này, bạn sẽ gán cho mỗi phần tử một con số. Theo đó, phần tử có số cao hơn sẽ nằm trên, phần tử có số thấp hơn sẽ nằm dưới. Ví dụ
01 #logo1 {02 position:absolute;
03 top:70px;
04 left:50px;
05 width:100px;
06 height:100px;
07 background:black;
08 z-index:1
09 }
10
11 #logo2 {
12 position:absolute;
13 top:140px;
14 left:100px;
15 width:100px;
16 height:100px;
17 background:yellow;
18 z-index:2
19 }
20
21 #logo3 {
22 position:absolute;
23 top:210px;
24 left:150px;
25 width:100px;
26 height:100px;
27 background:green;
28 z-index:3
29 }
30
31 #logo4 {
32 position:absolute;
33 top:280px;
34 left:200px;
35 width:100px;
36 height:100px;
37 background:orange;
38 z-index:4
39 }
40
41 #logo5 {
42 position:absolute;
43 top:350px;
44 left:250px;
45 width:100px;
46 height:100px;
47 background:red;
48 z-index:5
49 }
