Bài 25: Cách sử dụng Position trong css
Nội dung bài viết
Cách sử dụng Position trong css
Cách sử dụng Position trong css
Trong CSS, position được sử dụng để xác định vị trí của một phần tử trên trang web. Các giá trị phổ biến của thuộc tính position bao gồm:
1. static: Đây là giá trị mặc định cho thuộc tính position. Phần tử sẽ được đặt theo thứ tự mặc định của nó trên trang web và sẽ không được định vị bằng các thuộc tính top, bottom, left, và right.
Ví dụ: do là mặc định nên sẽ không cần phải cài đặt
2. relative: Phần tử sẽ được đặt theo vị trí mặc định của nó trên trang web và sẽ được di chuyển bằng các thuộc tính top, bottom, left, và right. Khi sử dụng giá trị relative, phần tử vẫn giữ lại vị trí của nó trên trang web.
Ví dụ:
div {
position: relative;
top: 20px;
left: 30px;
}3. absolute: Phần tử sẽ được đặt theo vị trí tuyệt đối bằng cách sử dụng các thuộc tính top, bottom, left, và right, nghĩa là nó sẽ được đặt trong phần tử cha của nó có kiểu vị trí là relative hoặc absolute. Khi sử dụng giá trị absolute, phần tử sẽ bị loại khỏi luồng bình thường của trang web.
Ví dụ:
div {
position: absolute;
top: 50px;
left: 100px;
}4. fixed: Phần tử sẽ được đặt theo vị trí tuyệt đối bằng cách sử dụng các thuộc tính top, bottom, left, và right, nhưng nó sẽ không bị ảnh hưởng bởi cuộn trang web. Khi sử dụng giá trị fixed, phần tử sẽ luôn được hiển thị ở cùng một vị trí trên trang web.
Ví dụ:
div {
position: fixed;
top: 0;
left: 0;
}5. sticky: Phần tử sẽ được đặt theo vị trí tương đối trên trang web và sẽ theo sau khi cuộn trang web đến một vị trí cụ thể. Khi sử dụng giá trị sticky, phần tử sẽ giữ lại vị trí của nó trong phần tử cha khi cuộn trang web.
Ví dụ:
div {
position: sticky;
top: 0;
}Trong các ví dụ trên, chúng ta đã sử dụng các giá trị khác nhau của thuộc tính position để định vị trí cho phần tử trên trang web.
Các giá trị khác của thuộc tính position bao gồm inherit, initial, và unset. Việc sử dụng giá trị phù hợp cho thuộc tính position sẽ giúp cho trang web của bạn trông chuyên nghiệp và dễ đọc hơn.
