[CSS 12] Thuộc tính Position trong CSS

Position (dịch là vị trí) là một thuộc tính khá phổ biến trong  CSS. Position có 4 giá trị chính đó là static (Tĩnh), relative (tương đối), absolute (tuyệt đối) và fixed (cố định). Ở Bài 6 trong chuỗi CSS cơ bản chúng ta sẽ tìm hiểu về thuộc tính Position và các giá trị của nó trọng CSS

Thuộc tính Position: static

Sử dụng position:static; được coi là thuộc tính mặc định (default). Khi được khai báo hoặc không khai báo thuộc tính này thì phần tử được chọn đều sẽ sắp xếp theo thứ tự của nó trong HTML

Thuộc tính position: relative

Khi một vùng chọn có thuộc tính position: relative có nghĩa là được xác định vị trí tương đối. Đi kèm với đó là các thuộc tính căn chỉnh tọa độ. Top: là cách trên, Bottom: là cách dưới, Left: là cách trái, Right: là cách phải.

Xét ví dụ bên dưới. Vùng chọn có class=”p-relative” đang được CSS với giá trị: position: relative. Cách lề trên 10px và lề trái 10 px (xem hình vuông số 2)

See the Pen
position by Nguyen The Cuong (@nguyen-the-cuong)
on CodePen.

Thuộc tính position: absolute

absolute là giá trị được dùng hạn chế hơn, nó thường được dùng để thiết lập vị trí cho một phần tử mà vị trí của phần tử này sẽ phụ thuộc vào phẩn tử mẹ của nó đang sử dụng giá trị relative. Nếu không có phần tử mẹ nào đang có giá trị relative thì nó sẽ lấy điểm neo là toàn bộ cửa sổ trình duyệt.

Cũng ví dụ như trên với vùng chọn có class=”p-absolute” đang được CSS với giá trị: position: absolute; Cách lề trên 10px và lề trái 200px. Nó sẽ neo theo vị trí của khung lớn nhất (mặc dù nó nằm trong ô vuông thứ 3)

Thuộc tính position: fixed

Giá trị fixed sử dụng để cố định một phần tử trên website dựa theo khung trình duyệt. Khi sử dụng giá trị này, mọi thuộc tính như left, right, top, bottom, đều dựa vào khung của trình duyệt làm điểm neo, và mọi hoạt động di chuyển của các phần tử sẽ không ảnh hưởng đến nó.

Xem ví dụ ở trên với vùng chọn có class=”p-fixed” Nó sẽ đứng yên khi lăn chuột trên màn hình.

Thuộc tính này thường được dùng để làm Sticky chạy theo website như nút gọi điện, liên hệ…

Ngoài ra tương tự như các thuộc tính khác, position cũng có giá trị là inherit (kế thừa giá trị của phần tử cha) hoặc initial (nhận giá trị mặc định)