Có lẽ câu hỏi phân biệt position: relative và position: absolute là câu hỏi khôn thể thiếu khi đi phỏng vấn front end. Mình thấy câu hỏi này không quá khó nhưng có khá nhiểu bạn không trả lời được hay trả lời sai vì đơn giản là lâu không động đến nên dễ lẫn lộn giữa 2 cái đó, mình cũng thế
Bây giờ mình sẽ thêm thuộc tính position: relative và xét cách trên 70px, trái 300px cho item màu vàng
position: relative; top: 70px; left: 300px;và đây là kết quả
Như các bạn thấy thì item màu vàng đã dịch chuyển trên 70px, trái 300px và item màu xanh không dịch chuyển lên để lấp vào chỗ item màu vàng để lại.
Bạn đang xem: Position absolute là gì
position: absolute
Xác định vị trí tương đối theo thẻ cha có thuộc tính là position: relative nếu thẻ cha không phải là position: relative thì nó sẽ được xác đinh theo thẻ body của trang web.
Lưu ý là: thuộc tính position: absolute sẽ làm thay đổi tới việc hiển thị ban đầu
Tương tự như ví dụ trên mình cũng thêm position: absolute và xét cách trên 0px, phải0px cho item màu vàng và thêm thuộc tính position: relative cho thẻ div container, ta được kết quả sau.
Xem thêm: Institutions Là Gì – Institution Là Gì, Nghĩa Của Từ Institution
Như các bạn thấy thì ngay khi xét lại vị trí của item màu vàng thì item màu xanh đã tràn lên vị trí của item màu vàng. Tiếp theo mình sẽ không để thuộc tính position: relative cho thẻ div container để xem kết quả như thế nào nhé
Do không có thẻ cha nào khai báo là position: relative nên giá trị top và right của item màu vàng được xác định theo thẻ body của trang web
position: fixed
Xác định vị trí tương đối cho cửa sổ trình duyệt, có nghĩa là nó luôn ở một vị trí ngay cả khi trang được cuộn. Nó dùng các thuộc tính left, right, top, bottom để xác định vị trí. Ứng dụng điển hình của nó có thể kể ra như giữ thanh menu của các trang web không bị mất đi khi cuộn xuống xem các nội dung khác.
Đây là ví dụ về menu có dùng thuộc tính position: fixed
Còn đây là không dùng thuộc tính position: fixed
Lời kết.
Xem thêm: Công Ty Hợp Danh Tiếng Anh Là Gì, Partnership / Công Ty Hợp Danh
Vậy là mình đã cùng các bạn tìm hiểu về thuộc tính position và và cùng xem relaive và absolute khác nhau như thế nào. Rất cảm ơn các bạn đã đọc.
Chuyên mục: Hỏi Đáp
