Định vị tương đối vs Định vị tuyệt đối trong CSS: Sự khác biệt và so sánh

Thế giới CSS giới thiệu cho chúng tôi nhiều điều khoản và điều kiện. CSS là một ngôn ngữ lập trình quan trọng trong HTML (một ngôn ngữ đánh dấu).

Nó được thực hiện bởi một số chuyên gia máy tính chuyên nghiệp và các nhà phân tích máy tính. Hai thuật ngữ, Định vị tương đối và Định vị tuyệt đối, nằm trong ngôn ngữ lập trình của CSS.

Chìa khóa chính

1. Định vị tương đối di chuyển một phần tử so với vị trí ban đầu của nó mà không ảnh hưởng đến bố cục của các phần tử khác.
2. Định vị tuyệt đối loại bỏ một phần tử khỏi luồng tài liệu và định vị phần tử đó so với tổ tiên được định vị gần nhất của nó.
3. Định vị tương đối duy trì vị trí của phần tử trong luồng tài liệu, trong khi định vị tuyệt đối có thể chồng chéo hoặc phá vỡ các phần tử khác.

Định vị tương đối vs Định vị tuyệt đối Trong CSS

Định vị tương đối có liên quan đến chuyển động của một phần tử trong tài liệu. Bố cục của tài liệu không thay đổi ở vị trí tương đối. Định vị tuyệt đối liên quan đến chuyển động của một phần tử trong các tài liệu khác nhau hoặc từ tài liệu này sang tài liệu khác. Bố cục của tài liệu có thể được thay đổi ở vị trí tuyệt đối.

Định vị tương đối trong CSS là một trong những thuật ngữ có giá trị nhất (được sử dụng bởi các nhà phân tích máy tính) trong lập trình.

Nó di chuyển một phần tử để nó giữ nguyên vị trí ban đầu của nó. Thuật ngữ “tương đối” đề cập đến một cái gì đó được đo lường theo tỷ lệ so với tổng thể.

Nó không thay đổi bố cục của tài liệu. Nó di chuyển một đối tượng sang trái, phải, trên và dưới.

Định vị tuyệt đối trong CSS là một loại vị trí có giá trị giúp bạn đặt một phần tử ở bất cứ đâu bạn muốn.

Kiểu hoạt ảnh của nó là rời rạc (tương tự như kiểu hoạt ảnh vị trí tương đối). Mã g của vị trí này là G90. Vị trí tuyệt đối luôn đặt một phần tử so với cha mẹ.

Loại vị trí này áp dụng cho các phần tử được đặt tên.

Bảng so sánh

Các thông số so sánh	Định vị tương đối trong CSS	Định vị tuyệt đối trong CSS
Chức năng	Định vị tương đối di chuyển một phần tử sang khu vực bên trái, bên phải, trên cùng hoặc dưới cùng trong tài liệu.	Định vị tuyệt đối di chuyển một thành phần từ luồng tài liệu này sang luồng tài liệu khác.
Khi nào nên sử dụng	Định vị tương đối được sử dụng khi phần tử bên trong của một trang cụ thể sẽ được định vị tuyệt đối.	Khi phần tử bên trong của phần tử của trang có vị trí tương đối, vị trí tuyệt đối được sử dụng.
Phản ứng bản địa	Định vị tương đối là tuyệt đối đối với cha mẹ.	Vị trí tuyệt đối là tương đối so với cha mẹ.
Luồng tài liệu bình thường	Định vị tương đối có một thành phần trong luồng tài liệu thông thường.	Định vị tuyệt đối sẽ loại bỏ một phần tử khỏi luồng tài liệu thông thường.
Bố trí	Trong trường hợp này, bố cục không thay đổi hoặc không thay đổi.	Bố cục đã thay đổi trong trường hợp định vị tuyệt đối.

Định vị tương đối trong CSS là gì?

Vị trí tương đối trong CSS là một trong những vị trí có giá trị nhất trong thế giới lập trình.

Định vị này được sử dụng khi một phần tử bên trong của một phần tử cụ thể cần được đặt một cách tuyệt đối.

Trong định vị tương đối, một phần tử luôn được đặt tuyệt đối so với phần tử gốc và tương đối so với vị trí thông thường của nó.

Trong CSS, vị trí tương đối làm cho một phần tử di chuyển ở các vị trí trái, phải, dưới cùng hoặc trên cùng.

Kiểu sắp xếp này có thể dẫn đến hình thành một số khoảng trống hoặc khoảng trống không thể lấp đầy. Loại định vị này không thay đổi bố cục.

Một số chi tiết cần được hiểu để hiểu thuật ngữ “định vị tương đối”. Một vài trong số những chi tiết này được đưa ra dưới đây:

• Loại hoạt ảnh – Rời rạc
• Giá trị tính toán – Theo quy định
• Giá trị mặc định – Tĩnh

Định vị tương đối giữ một phần tử trong tài liệu bình thường dòng chảy. Vị trí bình thường của phần tử nằm trong tài liệu, tương tự như giá trị tĩnh. CSS giao trách nhiệm duy nhất cho loại định vị này.

Một số chức năng được phục vụ bởi định vị tương đối. Một vài trong số các chức năng này là:

• Nó giúp xác định vị trí/vị trí của một phần tử.
• Nó giúp điều chỉnh vị trí của một phần tử trong phạm vi vị trí ban đầu của nó.
• Định vị tương đối mang lại cho người ta khả năng định vị các phần tử bên trong (trong một phần tử trang).

Định vị tuyệt đối trong CSS là gì?

Định vị tuyệt đối trong CSS là một loại định vị duy nhất làm thay đổi bố cục của trang.

Loại định vị này lấy ra một phần tử từ luồng tài liệu thông thường; do đó, các phần tử khác được định vị giống như phần tử cụ thể đó chưa từng tồn tại.

Trong định vị tuyệt đối, một phần tử luôn được đặt so với phần tử gốc và tuyệt đối với vị trí bình thường của nó.

Trong CSS, định vị tuyệt đối được sử dụng khi phần tử bên trong của trang của phần tử cụ thể cần được đặt tương đối. Định vị tuyệt đối được sử dụng trên các phần tử được đặt tên.

Nó không hoạt động trên các lớp hoặc các loại phần tử chung. Nguyên tắc chính của loại định vị này là nó chỉ hoạt động trên một phần tử tại một thời điểm.

Một số nhà phân tích và chuyên gia máy tính không biết cách căn giữa một phần tử bằng định vị tuyệt đối.

Đưa ra dưới đây là một số bước về cách thực hiện định tâm của một phần tử bằng cách sử dụng loại định vị này:

• Thêm vào bên trái 50℅ của phần tử mà bạn muốn căn giữa.
• Thêm lề trái âm bằng một nửa chiều rộng của phần tử.
• Sau đó, thêm phần trên cùng vào 50℅ của phần tử bạn muốn căn giữa.
• Và cuối cùng, thêm một lề trên âm bằng một nửa chiều rộng của công cụ.

Sự khác biệt chính giữa Định vị tương đối và Định vị tuyệt đối Trong CSS

1. Định vị tương đối là tuyệt đối với cha mẹ của nó, trong khi mặt khác, định vị tuyệt đối là tương đối với cha mẹ của nó.
2. Định vị tương đối di chuyển một phần tử có bố cục tài liệu cụ thể, trong khi đó, định vị tuyệt đối di chuyển một phần tử từ tài liệu này sang tài liệu khác.
3. Bố cục vẫn giữ nguyên trong trường hợp định vị tương đối, trong khi đó, định vị tuyệt đối sẽ thay đổi bố cục.
4. Mặt khác, phần tử vẫn nằm trong luồng tài liệu thông thường, trong khi ở vị trí tuyệt đối, phần tử được đưa ra khỏi luồng tài liệu thông thường.
5. Trong định vị tương đối, phần tử bên trong được định vị tương đối, trong khi, ở vị trí tuyệt đối, phần tử bên trong được định vị tuyệt đối.

dự án

1. https://dl.acm.org/doi/abs/10.1145/1067170.1067190
2. https://link.springer.com/article/10.1007/PL00012910

Cập nhật lần cuối: ngày 26 tháng 2023 năm XNUMX