Căn chỉnh vị trí trong CSS giúp bạn thiết lập vị trí các phần tử trong tài liệu HTML. Bạn có thể đặt bất cứ phần từ HTML nào tại bất cứ đâu bạn muốn. Hoặc bạn có thể xác định vị trí tương đối của phần tử này trong mối quan hệ (lệ thuộc) vào vị trí tự nhiên trong trang hoặc vị trí tuyệt đối dựa trên phần tử cha.
Tiếp theo chúng ta cùng tìm hiểu các thuộc tính trong CSS mà được sử dụng để chỉnh vị trí của phần tử.
Nội dung chính
Thuộc tính position trong CSS
Thuộc tính position xác định kiểu phương thức xác định vị trí được sử dụng cho một phần tử. Có 4 giá trị để chỉnh vị trí khác nhau mà thuộc tính này có thể nhận, đó là:
static
relative
fixed
absolute
Các phần tử sẽ được chỉnh vị trí bởi sử dụng các thuộc tính top, bottom, left và right. Tuy nhiên, các thuộc tính này sẽ không làm việc trừ khi bạn thiết lập thuộc tính position đầu tiên. Tùy vào giá trị truyền cho, các thuộc tính này sẽ đem lại tác động khác nhau.
Vị trí tương đối trong CSS
Một phần tử nếu được xác định với position: relative; tức là được chỉnh vị trí tương đối liên quan tới vị trí thông thường của nó.
Tùy theo cách bạn thiết lập các thuộc tính (như left, right, bottom và top) tới vị trí tương đối của phần tử thì vị trí của phần tử sẽ được căn chỉnh theo vị trí thông thường của nó. Chẳng hạn, left:20 sẽ cộng vào vị trí bên trái của phần tử.
Ví dụ sau minh họa cách sử dụng thuộc tính này trong CSS:
<html> <head> <meta charset="UTF-8"> </head> <body> <div style="position:relative;left:80px;top:2px; background-color:yellow;"> Ví dụ giá trị relative của thuộc tính position. </div> </body> </html>
Kết quả:
Vị trí tuyệt đối trong CSS
Một phần tử nếu được xác định với position: absolute; tức là được xác định vị trí tuyệt đối. Phần tử sẽ được định vị trí theo cửa sổ trình duyệt.
Ví dụ minh họa cho vị trí tuyệt đối trong CSS:
<html> <head> <meta charset="UTF-8"> </head> <body> <div style="position:absolute; left:80px; top:20px; background-color:yellow;"> Ví dụ giá trị absolute của thuộc tính position. </div> </body> </html>
Ví trí cố định trong CSS
Thuộc tính postion: fixed; xác định vị trí cố định cho một phần tử. Vị trí cố định này được thiết lập theo cửa sổ trình duyệt.
Ví dụ sau minh họa cách thiết lập vị trí cố định trong CSS.
<html> <head> <meta charset="UTF-8"> </head> <body> <div style="position:fixed; left:80px; top:20px; background-color:yellow;"> Ví dụ giá trị fixed của thuộc tính position. </div> </body> </html>
