CSS 锚点定位
CSS 锚点定位模块定义了允许您将元素相互连接的功能。某些元素被定义为锚点元素;锚点定位元素可以根据它们所绑定的锚点元素的大小和位置来设置自身的大小和位置。
此外,该规范还提供了纯 CSS 机制来
- 为锚定元素指定一组备选位置;当默认渲染位置导致它溢出其包含块和/或在屏幕外渲染时,浏览器将尝试在备选位置渲染锚定元素。
- 在不适合将锚点定位元素与其锚点元素连接的情况下,声明锚点定位元素应该隐藏的条件。
参考
属性
anchor-nameposition-anchorposition-areaposition-try-fallbacksposition-try-orderposition-try简写position-visibility
CSS 锚点定位模块还引入了 anchor-scope 属性。目前,没有浏览器支持此功能。
At-rule 和描述符
函数
数据类型和值
HTML 属性
anchor非标准
接口
指南
- 使用 CSS 锚点定位
-
基本锚点定位概念的入门指南,包括元素相对于其锚点的关联、定位和大小调整。
- 溢出时的备用选项和条件隐藏
-
一份关于 CSS 锚点定位提供的机制的指南,以防止锚点定位元素溢出其包含元素或视口,包括位置尝试备用选项和条件隐藏元素。
相关概念
- CSS 逻辑属性和值模块
inset-block-startinset-block-endinset-inline-startinset-inline-endinset-blockinset-inlineinset简写inline-sizemin-block-sizemin-inline-sizeblock-sizemax-block-sizemax-inline-sizemargin-blockmargin-block-endmargin-block-startmargin-inlinemargin-inline-endmargin-inline-start- Inset 属性 词汇表术语
- CSS 定位布局模块
- CSS 盒模型模块
- CSS 盒模型对齐模块
规范
| 规范 |
|---|
| CSS 锚点定位 |