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
anchorNon-standard
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
- Module CSS logical properties and values:
inset-block-startinset-block-endinset-inline-startinset-inline-endinset-blockinset-inlineinsetshorthandinline-sizemin-block-sizemin-inline-sizeblock-sizemax-block-sizemax-inline-sizemargin-blockmargin-block-endmargin-block-startmargin-inlinemargin-inline-endmargin-inline-start- Thuật ngữ Inset properties
- Module CSS positioned layout:
- Module CSS box model:
- Module CSS box alignment:
Đặc tả
| Specification |
|---|
| CSS Anchor Positioning Module Level 1> |
| CSS Anchor Positioning Module Level 2> |