[HICC.VN]

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 lúc đ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 chúng ta không trả lời được nhiều lần trả lời sai vì tốt nhất là lâu không động đến nên dễ lẫn lộn giữa 2 chiếc đó, mình cũng thế

*

hiện tại 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ư những chúng ta 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 nhằm lấp vào chỗ item màu vàng nhằm lại.

chúng ta đ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ẽ mắc phải được xác đinh theo thẻ body của website.

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ư những chúng ta thấy thì ngay lúc 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 nhằm thuộc tính position: relative cho thẻ div container nhằm xem kết quả ra sao 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 website

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ả lúc trang được cuộn. Nó sử dụng những thuộc tính left, right, top, bottom nhằm xác định vị trí. Ứng dụng điển hình của nó hoàn toàn có thể kể ra như giữ thanh menu của những website không mắc phải mất đi lúc cuộn xuống xem những nội dung khác.

Đây là ví dụ về menu có sử dụng thuộc tính position: fixed

*

Còn đây là không sử 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 những chúng ta tìm hiểu về thuộc tính position và và cùng xem relaive và absolute khác nhau ra sao. Rất cảm ơn những chúng ta đã đọc.

luôn mục: Hỏi Đáp

Nguồn : Tổng hợp

[bvlq_danh_muc]

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.