Thuộc tính position

Thuộc tính position
Thuộc tính position

Thuộc tính position giúp chúng ta dễ dàng điều chỉnh vị trí (tương đối, tuyệt đối) của một phần tử. Nhờ vậy, chúng ta có thể xây dựng bố cục cho trang web.

Trong bài giới thiệu về Box Model, mình có giới thiệu qua về cách mà các phần tử HTML hiển thị. Hộp chồng hộp, tuy nhiên trong một số truờng hợp. Để có được bố cục tiện dụng hơn. Chúng ta cần phải thay đổi luồng hiển thị đó. Thuộc tính position sẽ giúp ta thực hiện. Để hiểu rõ hơn về thuộc tính postion, chúng ta sẽ lần lượt tìm hiểu qua từng giá trị của nó nhé.

static

Đây là giá trị mặc định của tất cả các phần tử. Với giá trị này, các phần tử sẽ hiển thị đúng với thứ tự của tài liệu HTML. Phần tử nào xuất hiện trước thì hiển thị trước.

absolute

Một phần tử khi có thuộc tính positon với giá trị absolute sẽ có vị trí rất đặc biệt. Đầu tiên, nó sẽ xác định phần tử tổ tiên gần nhất của nó (có thể là cha, ông nội, ông cố…) có thuộc tính không phải static (có thể là relative, absolute, fixed…). Sau đó, dựa vào các thuộc tính top, bottom, left và right chúng ta sẽ xác định được vị trí chính xác của nó. Mô tả bằng lời có vẻ hơi trừu tượng. Mình sẽ minh họa thêm bằng hình ảnh.

Absolute position
Absolute position

Trong thực tế, chúng ta có thể bắt gặp rất nhiều giao diện như trên. Các bạn có thấy phần tử badge có nội dung ‘Sale!’. Với các hiển thị mặc định của HTML, chúng ta không thể nào lồng 1 phần tử nằm lưng chừng một tấm hình hay một phần tử khác như vậy. Trong trường hợp này, chúng ta cần đến sự giúp đỡ của CSS.

Các bạn hãy xem ví dụ này, sử dụng chức năng ‘view page source’ để nhìn rõ cấu trúc HTML và các rule CSS để hiểu rõ hơn nhé.

fixed

Giá trị fixed dễ hiểu hơn rất nhiều so với absolute. Một phần tử có thuộc tính position với trá trị fixed sẽ được cố định vào khung hình của trình duyệt web.

Fixed Position
Fixed Position

Khi chúng ta sử dụng các trang web. Các bạn cũng dễ dàng nhận thấy, có một số phần tử được cố định một ví trí trên của sổ trình duyệt. Dù chúng ta có di chuyển đến phần nào của trang web. Thì các phần tử này cũng vẫn cố định vị trí.

Để cố định các phần tử đó, chúng ta sẽ set giá trị fixed cho thuộc tính position và sử dụng các thuộc tính top, bottom, left và right để quy định khoảng cách của chúng, đến các cạnh tương ứng của trình duyệt.

Các bạn có thể xem thêm ví dụ này, để hiểu rõ hơn.

relative

Khi được set giá trị relative cho thuộc position. Chúng ta có thể thay đổi vị trí của một phần tử, so với vị trí ban đầu của chính nó. Ví dụ, chúng ta muốn một phần tử dịch sang trái (so với vị trí cũ) 5px. Hay đơn giản, ở ví dụ giá trị absolute, chúng ta có thể sử dụng thuộc tính này, để biến đổi 1 phần tử thành non-static.

Để hiểu rõ hơn giá trị này, chúng ta có thể xem ví dụ. Màu đỏ là vị trí ban đầu, màu xanh là vị trí của nó, sau khi rời top 50px và left 50px.

sticky

Giá trị sticky phụ thuộc vào vị trí của chúng ta trên trang web. Nó sẽ chuyển đổi từ vị trí bình thường, sang giống như giá trị fixed khi đến vị trí thích hợp. Cũng tất khó để mô tả, diễn giải bằng lời. Do đó, các bạn hãy xem ví dụ này.

Lưu ý: giá trị này không hỗ trợ trình duyệt IE / Edge 15 trở về trước. Nó hỗ trợ trình duyệt Safari từ phiên bản 6.1 với điều kiện phải đi kèm tiền tố -webkit0.