Categories CSS

Thuộc tính position trong CSS

Thuộc tính position dùng để lấy điểm mốc tham chiếu cho việc xác định vị trí của hộp thẻ. Có thể bạn quen với việc dùng float để tạo bố cục nhưng không thành thạo position là thiệt thòi lớn, vì ít nhất menu xổ, popup xuất hiện khi hover, hoặc menu cố định đều cần đến position.

Chúng ta bắt đầu với nghĩa tiếng Việt của position, nó có nghĩa là vị trí. Dưới đây là các giá trị của nó…


Định vị static

Đây là giá trị mặc định của các thẻ, theo đó chúng sẽ được sắp xếp theo thứ tự từ trên xuống dưới đúng như trong mã đánh dấu, ví dụ:

Đây là hộp thứ nhất
Đây là hộp thứ hai
Đây là hộp thứ ba
Đây là hộp thứ tư

Code mẫu:

div {
position: static;
border: 1px solid red; 
margin: 10px 0px 10px 0px; 
padding: 10px; 
}

Trong các ví dụ tiếp theo, tôi sẽ lấy hộp thứ ba để điều chỉnh position của nó.


Định vị relative

Khi sử dụng relative, nó sẽ lấy điểm mốc của hộp là thẻ liền kề nhất với nó, bao gồm các thẻ bên trên, bên dưới và bao quanh:

Đây là hộp thứ nhất
Đây là hộp thứ hai
Đây là hộp thứ ba
Đây là hộp thứ tư

Code mẫu:

div {
position: relative;
top: 15px;
left: 15px;
border: 1px solid red; 
margin: 10px 0px 10px 0px; 
padding: 10px; 
}

Định vị relative thường đi kèm với top và left, right, bottom để lấy vị trí. Bạn có thể thấy relative vẫn còn nằm trong luồng của trang tức là vẫn còn liên quan đến thẻ đứng trước nó.


Định vị absolute

Theo mặc định, định vị absolute sẽ lấy thẻ body làm mốc (điểm trên cùng bên trái) – nếu tôi bao bốn hộp này bằng một hộp cha lớn – và để hộp cha lớn là relative thì hộp thứ ba với định vị absolute sẽ lấy mốc là hộp cha lớn chứ không phải là body nữa. Ví dụ:

Đây là hộp thứ nhất
Đây là hộp thứ hai
Đây là hộp thứ ba
Đây là hộp thứ tư

Code mẫu:

div { 
position: absolute;
top: 15px; 
left: 15px; 
border: 1px solid red; 
margin: 10px 0px 10px 0px; 
padding: 10px; 
}

Điểm mấu chốt cần nhớ là định vị absolute làm cho hộp không còn liên quan đến các hộp bên cạnh nữa mà lại lấy định vị là thẻ body (theo mặc định) hoặc thẻ cha (nếu để thẻ cha là relative)


Định vị fixed

Về cơ bản fixed cũng giống với absolute, chỉ khác là nếu absolute lấy mốc là thẻ body hoặc thẻ cha thì fixed lại lấy mốc là trình duyệt web. Các nút like, share trượt dọc hoặc top menu luôn luôn ở trên đầu trang web sử dụng fixed để cố định. Dù bạn cuộn lên cuộn xuống để xem web, bạn vẫn thấy chúng ở cùng vị trí….Bạn liếc sang góc trái phía trên cùng đi, sẽ thấy cái hộp thứ ba đang ở đây, cuộn thanh trượt dọc xem, nó sẽ di chuyển theo bạn.

Đây là hộp thứ nhất
Đây là hộp thứ hai
Đây là hộp thứ ba – position: fixed
Đây là hộp thứ tư

Code mẫu:

div { 
position: fixed; 
left: 0%; 
top: 0%; 
border: 1px solid red; 
padding: 10px;
}

Như vậy với relative, hộp vẫn còn trong luồng của trang, nhưng với absolute và fixed, hộp thoát khỏi luồng của trang và lấy mốc định vị khác hẳn.

Back to Top