Thuộc tính position trong CSS
1) Thuộc tính position trong CSS
2) Cách sử dụng thuộc tính position trong CSS
- Để sử dụng thuộc tính position, ta dùng cú pháp như sau:
position: static|absolute|fixed|relative|initial|inherit;- Trong đó, ta thấy giá trị của thuộc tính position có thể được xác định bởi một trong sáu loại:
static (vị trí tĩnh) |
- Đây là vị trí mặc định của các phần tử, nó sẽ xuất hiện theo đúng vị trí được sắp đặt trong đoạn mã. - Lưu ý: Đối với vị trí này, phần tử sẽ không bị ảnh hưởng bởi các thuộc tính: top, bottom, left, right. |
Xem ví dụ |
relative (vị trí tương đối) |
- Phần tử sẽ được nằm ở một vị trí tương đối so với vị trí tĩnh của nó. Tuy nhiên, khoảng không gian vốn có giữa nó và các phần tử xung quanh vẫn được giữ nguyên. - Lưu ý: Đối với vị trí này:
|
Xem ví dụ |
absolute (vị trí tuyệt đối) |
- Vị trí của phần tử sẽ được xác định từ vị trí padding của phần tử tổ tiên được thiết lập thuộc tính position với giá trị là relative, absolute hoặc fixed nằm gần với nó nhất. - Lưu ý: Nếu không có tổ tiên thỏa yêu cầu trên thì mặc định vị trí của nó sẽ được xác định từ vị trí của phần tử <html> |
Xem ví dụ |
fixed (vị trí cố định) |
- Phần tử sẽ nằm một chỗ cố định đối với khung nhìn, tức là cho dù ta có kéo thanh scroll lên xuống hay qua trái phải thì vị trí của nó vẫn không thay đổi. - Vị trí của nó sẽ được xác định từ vị trí của phần tử <html> |
Xem ví dụ |
| initial |
- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính position có giá trị static) |
Xem ví dụ |
| inherit | - Kế thừa giá trị thuộc tính position từ phần tử cha của nó |
Xem ví dụ |