CSS giúp bạn định vị phần tử HTML của mình. Bạn có thể đặt bất kỳ phần tử HTML nào ở bất kỳ vị trí nào bạn thích. Bạn có thể chỉ định xem bạn muốn phần tử được định vị tương ứng với vị trí tự nhiên của nó trong trang hay tuyệt đối dựa trên phần tử cha của nó
Bây giờ, chúng ta sẽ thấy tất cả các thuộc tính liên quan đến định vị CSS với các ví dụ –
Định vị tương đối
Định vị tương đối thay đổi vị trí của phần tử HTML so với vị trí thường xuất hiện. Vì vậy, "trái. 20" thêm 20 pixel vào vị trí TRÁI của phần tử
Bạn có thể sử dụng hai giá trị top và left cùng với thuộc tính vị trí để di chuyển phần tử HTML đến bất kỳ đâu trong tài liệu HTML
Thuộc tính left trong CSS được sử dụng để chỉ định vị trí nằm ngang của phần tử được định vị. Nó không có tác dụng đối với các phần tử không được định vị.
Ghi chú
- Nếu thuộc tính vị trí là tuyệt đối hoặc cố định, thì thuộc tính left chỉ định khoảng cách giữa cạnh trái của phần tử và cạnh trái của khối chứa nó
- Nếu thuộc tính vị trí là tương đối, thì thuộc tính left chỉ định khoảng cách của cạnh trái của phần tử được di chuyển sang phải so với vị trí bình thường của nó
- Nếu thuộc tính vị trí là cố định, thuộc tính bên trái hoạt động giống như vị trí của nó là tương đối khi phần tử ở bên trong chế độ xem và giống như vị trí của nó được cố định khi nó ở bên ngoài
- Nếu thuộc tính vị trí là tĩnh, thuộc tính bên trái không có tác dụng
- Nếu cả hai thuộc tính left và right được xác định, thì giá trị bên trái được ưu tiên khi vùng chứa từ trái sang phải và giá trị bên phải được ưu tiên khi vùng chứa từ phải sang trái
cú pháp
left: length|percentage|auto|initial|inherit;
Giá trị tài sản
- chiều dài. Nó được sử dụng để chỉ định độ dài của thuộc tính left. Nó chấp nhận các giá trị tích cực và tiêu cực
- phần trăm. Nó chỉ định chiều rộng của khối chứa theo tỷ lệ phần trăm
- tự động. Nó được sử dụng để đặt thuộc tính left về giá trị mặc định của nó
- ban đầu. Nó được sử dụng để chỉ định thuộc tính left về giá trị mặc định của nó
- thừa kế. Nó đặt thuộc tính left từ cha mẹ của nó
ví dụ 1. Ví dụ này mô tả thuộc tính vị trí thành tuyệt đối.
HTML