Xác định vị trí các đối tượng
Trong học phần trước, bạn đã phát triển một bố cục trong đó các đối tượng của trang căn
chỉnh chặt chẽ theo các dòng và các cột của một lưới. Trong khi một bố cục lưới cung cấp
cho một page một cảm giác về sự đồng dạng và cấu trúc, nó hạn chế sự tự do của bạn đặt các
đối tượng tại các vị trí khác nhau bên trong trang. Trong học phần này, bạn sẽ khám phá làm
cách nào phá vỡ lưới sử dụng CSS positioning styles.
CSS positioning styles
CSS hỗ trợ một vài đặc tính để đặt các đối tượng tại các toạ độ cụ thể bên trong trang hay bên
trong cái chứa của chúng. Để đặt một phần tử tại một vị trí cụ thể bên trong cái chứa của nó, bạn
sử dụng các đặc tính style sau:
position: type;
top: value;
right: value;
bottom: value;
left: value;
nơi type chỉ loại positioning áp dụng tới phần tử, và các đặc tính top, right, bottom, và left chỉ toạ
độ lề đỉnh, phải, đáy và trái của phần tử tương ứng. Các toạ độ có thể được biểu thị bằng bất cứ đơn vị
đo lường CSS nào như tỷ lệ % của width hay height của cái chứa.
CSS hỗ trợ 5 loại positioning: static (mặc định), relative, absolute, fixed và inherit. Trong static postioning,
phần tử được đặt nơi chúng nằm tự nhiên bên trong dòng của tài liệu. Cái này về cơ bản tương tự như không
sử dụng CSS postioning. Các trình duyệt sẽ bỏ qua các giá trị được chỉ ra cho các đặc tính top, left, bottom
hay right dưới static positioning.