CSS anchor positioning

Module CSS anchor positioning định nghĩa các tính năng cho phép bạn gắn kết các phần tử lại với nhau. Một số phần tử được định nghĩa là anchor element (phần tử neo); các anchor-positioned element (phần tử được định vị bằng anchor) có thể được thiết lập kích thước và vị trí dựa trên kích thước và vị trí của các anchor element mà chúng được liên kết tới.

Ngoài ra, đặc tả cũng cung cấp các cơ chế chỉ dùng CSS để:

  • Chỉ định một tập các vị trí thay thế cho một phần tử được neo; khi vị trí hiển thị mặc định khiến phần tử tràn ra ngoài containing block hoặc ra ngoài màn hình, trình duyệt sẽ thử hiển thị phần tử được neo ở các vị trí thay thế đó.
  • Khai báo các điều kiện mà dưới đó các anchor-positioned element sẽ bị ẩn đi, trong những tình huống không thích hợp để neo chúng vào anchor element.

Tham chiếu

Thuộc tính

At-rule và descriptor

Hàm

Kiểu dữ liệu và giá trị

Thuộc tính HTML

Interface

Hướng dẫn

Sử dụng CSS anchor positioning

Hướng dẫn giới thiệu về các khái niệm cơ bản của anchor positioning, bao gồm cách liên kết, định vị và điều chỉnh kích thước các phần tử tương đối với anchor của chúng.

Fallback option và ẩn có điều kiện khi tràn nội dung

Hướng dẫn về các cơ chế mà CSS anchor positioning cung cấp để ngăn các anchor-positioned element tràn ra ngoài containing element hoặc viewport, bao gồm các position try fallback option và ẩn phần tử có điều kiện.

Sử dụng anchored container queries

Giải thích cách sử dụng anchored container queries để áp dụng style có điều kiện cho các anchor-positioned element tùy thuộc vào position try fallback option nào đang hoạt động trên chúng.

Khái niệm liên quan

Đặc tả

Specification
CSS Anchor Positioning Module Level 1
CSS Anchor Positioning Module Level 2

Xem thêm