绝对定位与视口定位

一、核心能力

1、定位方式：仅弹性容器下子元素支持定位模式配置，网格容器下子元素无此能力。该能力基础源自 CSS position，可查看 MDN 文档 了解详细信息。

2、定位模式

• 默认定位：遵循文档流常规布局（position: static）

• 绝对定位：相对于父容器定位（position: absolute）

• 视口定位：相对于浏览器视口定位（position: fixed）

浮动定位元素定义：包含绝对/视口定位模式，脱离文档流渲染

3、溢出渲染

• 绝对定位元素受限于父容器的自身溢出配置

• 视口定位元素不受限于父容器的自身溢出配置

4、浮动定位元素的拖拽搭建

• 支持画布拖拽，实现大纲树顺序的调整，以默认定位的元素为锚点

• 支持画布拖拽，实现跨父容器的层级移动

  • 若新的父元素为网格容器，按默认的网格布局规则排列，浮动失效

  • 若新的父元素为弹性容器，浮动继续生效

二、层级管理（z-index）

1、默认渲染优先级

• 浮动定位元素 > 默认定位元素

• 同类型（绝对或视口）元素按组件树顺序渲染（组件树靠后的，显示在前）

2、index生效规则

• 数值越大层级越高（仅限浮动定位元素）

• 显式设置值优先于默认规则

三、Control 操作逻辑

1、快速定位第一行：提供四角预设（左上/右上/右下/左下），实现精准定位；最后的 auto 按钮，将按父容器的排列方式（垂直与水平）定位

2、快速定位第二行：需结合自动的高度与宽度时，实现目标渲染效果，否则无效。

3、快捷入口本质是快速设置下方的 top、right、bottom和left。自行设置也可以获得同样的效果。

四、效果展示

1、第一行快捷设置入口效果：

2、具体的坐标值修改

3、第二行快捷设置入口效果（需要组件自身宽度或高度为自动）

五、最佳实践：实现垂直与水平居中

1、宽高为固定像素

• 将 top 与 left 坐标设为 50%

• 将上边距与左边距分别设置为负的高度和宽度的一半

2、宽高为百分比

• top 坐标：(100% - 高度百分比) / 2

• left 坐标：(100% - 宽度百分比) / 2