Hỏi đáp

Position Absolute Là Gì – Tìm hiểu ngầm Thuộc Tính Position Trong Css

với 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 ko quá khó nhưng với khá nhiểu du khách ko trả lời được hay trả lời sai vì đơn thuần là lâu ko động tới nên dễ lẫn lộn giữa 2 mẫu đó, mình cũng thế

*

hiện nay 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 du khách thấy thì item màu vàng đã dịch chuyển trên 70px, trái 300px và item màu xanh ko dịch chuyển lên để lấp vào chỗ item màu vàng để lại.

du khách đang xem: Position absolute là gì

position: absolute

Xác định vị trí tương đối theo thẻ cha với thuộc tính là position: relative nếu thẻ cha ko 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ư những du khách 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ẽ ko để thuộc tính position: relative cho thẻ div container để xem kết quả như thế nào nhé

*

Do ko với 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, với 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 để xác định vị trí. Ứng dụng điển hình của nó với thể kể ra như giữ thanh menu của những trang web ko bị mất đi lúc cuộn xuống xem những nội dung khác.

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

*

Còn đây là ko sử dụng thuộc tính position: fixed

*

Lời kết.

Xem thêm: siêu thị Hợp Danh Tiếng Anh Là Gì, Partnership / siêu thị Hợp Danh

Vậy là mình đã cùng những du khách tìm hiểu ngầm 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 những du khách đã đọc.

Chuyên mục: Hỏi Đáp


Nguồn : Sưu tầm

Related Articles

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 *

Back to top button