Sự khác biệt giữa định vị tĩnh và tương đối

Trong CSS, sự khác biệt giữa định vị tĩnh (mặc định) và định vị tương đối là gì?

Định vị tĩnh là mô hình định vị mặc định cho các phần tử. Chúng được hiển thị trên trang nơi chúng được hiển thị như một phần của luồng HTML thông thường. Yếu tố tĩnh vị trí không vâng lời left, top, rightvà bottomquy tắc:

Vị trí tương đối cho phép bạn chỉ định một độ lệch cụ thể ( left, topv.v.) có liên quan đến vị trí bình thường của phần tử trong luồng HTML. Vì vậy, nếu tôi có một hộp văn bản bên trong một hộp văn bản, divtôi có thể áp dụng định vị tương đối trên hộp văn bản để hiển thị nó ở một vị trí cụ thể so với nơi nó thường được đặt trong div:

Ngoài ra còn có định vị tuyệt đối - theo đó bạn chỉ định vị trí chính xác của phần tử so với toàn bộ tài liệu hoặc phần tử được định vị tương đối tiếp theo trên cây phần tử :

Và khi a position: relativeđược áp dụng cho phần tử cha trong hệ thống phân cấp:

Lưu ý rằng phần tử có vị trí tuyệt đối của chúng ta bị ràng buộc như thế nào bởi phần tử có vị trí tương đối.

Và cuối cùng là đã được sửa. Định vị cố định hạn chế một phần tử ở một vị trí cụ thể trong khung nhìn, vị trí này vẫn ở vị trí trong khi cuộn:

Bạn cũng có thể quan sát hành vi mà các phần tử được định vị cố định không gây ra cuộn vì chúng không được coi là bị ràng buộc bởi khung nhìn:

Trong khi các phần tử được định vị tuyệt đối vẫn bị ràng buộc bởi khung nhìn và sẽ gây ra hiện tượng cuộn:

.. tất nhiên, trừ khi phần tử mẹ của bạn sử dụng overflow: ?để xác định hành vi của cuộn (nếu có).

Với định vị tuyệt đối và định vị cố định, các phần tử được đưa ra khỏi luồng HTML.

Bạn có thể xem tổng quan đơn giản tại đây: W3School

Ngoài ra, nếu tôi nhớ lại chính xác, khi khai báo một phần tử tương đối, theo mặc định, nó sẽ ở cùng một vị trí với nó nếu không, nhưng bạn có khả năng định vị tuyệt đối các phần tử bên trong nó tương đối với phần tử này, điều mà tôi thấy rất hữu ích trong quá khứ.

Để trả lời cho câu hỏi "tại sao CSS vẫn triển khai position: static;" trong một trường hợp, sử dụng vị trí: tương đối cho cha mẹ và vị trí: tuyệt đối cho con sẽ giới hạn chiều rộng chia tỷ lệ của con. Trong hệ thống menu ngang, nơi bạn có thể có 'cột' liên kết, việc sử dụng 'width: auto' không hoạt động với cha mẹ tương đối. Trong trường hợp này, việc thay đổi nó thành 'static' sẽ cho phép chiều rộng có thể thay đổi tùy thuộc vào nội dung bên trong.

Tôi đã dành vài giờ để tự hỏi tại sao tôi không thể điều chỉnh vùng chứa của mình dựa trên lượng nội dung bên trong đó. Hi vọng điêu nay co ich!

Vị trí tương đối cho phép bạn sử dụng trên / dưới / trái / phải để định vị. Tĩnh sẽ không cho phép bạn làm điều này trừ khi bạn sử dụng các tham số ký quỹ. Có sự khác biệt giữa Top và margin-top.

Bạn sẽ không cần sử dụng tĩnh nhiều vì nó mặc định

Vị trí tương đối là so với dòng chảy bình thường. Vị trí tương đối của phần tử đó (với các hiệu số) là so với vị trí mà phần tử đó đã bình thường nếu không được di chuyển.

Matthew Abbott có một câu trả lời rất hay.

Tuyệt đối và các mặt hàng tương đối vị trí tốt vâng lời top, left, rightvà bottomcác lệnh (offsets), nơi mục tĩnh vị trí thì không.

Các mục được định vị tương đối di chuyển lệch khỏi vị trí mà chúng thường có trong html.

Các mục được định vị tuyệt đối di chuyển các phần tử khỏi tài liệu hoặc phần tử được định vị tương đối tiếp theo lên cây DOM.

Tĩnh: Một phần tử được định vị STATIC là những gì chúng ta nhận được bằng cách DEFAULT (Vị trí thông thường của các đối tượng).

Tương đối: Tương đối với vị trí hiện tại, nhưng có thể di chuyển được. Hoặc một phần tử được định vị RELATIVE được định vị so với ITSELF.

static và tương đối là các thuộc tính vị trí. tương đối được sử dụng cho nhiều mục đích. Không phải cho một. Nhưng hãy nhớ rằng tĩnh và tương đối không gây hại cho dòng tài liệu bình thường của Html. static là vị trí mặc định khi bạn ghi bất kỳ phần tử nào vào Html. Nếu một phần tử có vị trí tương đối, thì phần tử đó có thể được định vị so với vị trí gốc của nó. khi bạn muốn điều chỉnh phần tử từ khoảng trống nhỏ, hãy sử dụng vị trí tương đối để bạn không cần thêm lề, phần đệm, v.v. nếu phần tử có vị trí tương đối và nó có phần tử con. Ở đây chúng tôi có thể thực hiện các phép đo tương đối với cha mẹ của nó. Nếu bạn thêm chiều rộng 10% vào con, nghĩa là (chiều rộng + phần đệm) x10%. Nhưng bạn không thêm từ khóa tương đối, bạn sẽ nhận được chiều rộng x 10%. Ngoài ra, cách sử dụng quan trọng nhất của họ hàng là; bạn có thể đặt bất kỳ phần tử nào ở trên cùng của nó.