Định vị tuyệt đối CSS

Khung của phần tử được định vị tuyệt đối sẽ bị loại bỏ hoàn toàn khỏi luồng tài liệu và được định vị tương đối với khung bao gồm, khung bao gồm có thể là một phần tử khác trong tài liệu hoặc khung bao gồm ban đầu. Khoảng trống mà phần tử原先 chiếm trong luồng tài liệu sẽ được đóng lại, như thể phần tử này không tồn tại.

Định vị tuyệt đối CSS

Định vị tuyệt đối làm cho vị trí của phần tử không liên quan đến luồng tài liệu, vì vậy không chiếm không gian. Điểm này khác với định vị tương đối, vì thực tế định vị tương đối được coi là một phần của mô hình định vị luồng thông thường, vì vị trí của phần tử tương đối với vị trí của nó trong luồng thông thường.

Các phần tử khác trong luồng thông thường được sắp đặt như thể các phần tử định vị tuyệt đối không tồn tại:

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

như hình dưới đây:

Mô hình định vị tuyệt đối CSS

vị trí của phần tử tuyệt đối định vị so vớiphần tử cha đã định vị gần nhấtnếu phần tử không có phần tử cha đã định vị, thì vị trí của nó so vớiKhung bao gồm ban đầu.

Vấn đề chính của định vị là cần nhớ ý nghĩa của mỗi loại định vị. Do đó, bây giờ chúng ta hãy复习 lại kiến thức đã học: Định vị tương đối là “so với” vị trí ban đầu của phần tử trong tài liệu, trong khi định vị tuyệt đối là “so với” phần tử cha đã định vị gần nhất, nếu không có phần tử cha đã định vị, thì “so với” khung bao gồm ban đầu.

Chú ý:Dựa trên người dùng đại lý khác nhau, khung bao gồm ban đầu có thể là canvas hoặc phần tử HTML.

Lưu ý:Bởi vì khung tuyệt đối không liên quan đến luồng tài liệu, vì vậy chúng có thể che盖 trang web khác. Có thể thiết lập Thuộc tính z-indexĐể kiểm soát thứ tự sắp xếp các khung này.

Mô hình định vị tuyệt đối CSS

Định vị: Định vị tuyệt đối
Ví dụ này trình bày cách sử dụng giá trị tuyệt đối để định vị phần tử.