Bài 14: Position

✦ Nguyên lý hoạt động của position:
Hã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:

img { position:absolute; top:70px; left:90px }

1. Static
- Định vị với giá trị static là cách mặc định mà một phần tử sẽ xuất hiện trong tài liệu (X)HTML của bạn. Kể cả khi bạn không khai báo position cho phần tử thì mặc định nó vẫn có giá trị static.

p {
    position: static;
  }

2. Relative
- 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.

p {
    position: relative;
    top: -20px;
    left: 20px;
  }

3. Absolute
- Đị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ụ: đặt bốn ảnh ở bốn góc tài liệu bằng định vị tuyệt đối.

#logo1 { 
         position:absolute; 
         top:50px; 
         left:70px 
       }
#logo2 { 
         position:absolute; 
         top:0; 
         right:0
       }
#logo3 { 
         position:absolute; 
         bottom:0; 
         left:0 
       }
#logo4 { 
         position:absolute; 
         bottom:70px; 
         right:50px 
       }

4. Fixed
- Sử dụng để cố định 1 thành phần so với cửa sổ trình duyệt, khi kéo thanh cuộn thì thành phần đó vẫn được cố định so với trình duyệt.
- fixed hay được sử dụng để tạo các thành phần cố định như quảng cáo, các nút bấm,...
Ví dụ:

p {
    position: fixed;
    top: 30px;
    left: 20px;
}

5. Inherit
- Sử dụng inherit thuộc tính sẽ được thừa hưởng từ thành phần cha (thành phần bao ngoài)

position: inherit;