ArkUI 学习之位置设置：position（绝对定位・子组件相对父组件）

position

position(value: Position | Edges | LocalizedEdges)

绝对定位，确定子组件相对父组件的位置。当父容器为Row/Column/Flex时，设置position的子组件不占位。

！！！注意： Position类型基于父组件左上角确定位置;Edges类型基于父组件四边确定位置，top/left/right/bottom分别为组件各边距离父组件相应边的边距，通过边距来确定组件相对于父组件的位置;LocalizedEdges类型基于父组件四边确定位置，支持镜像模式。

说明：

适用于置顶显示、悬浮按钮等组件在父容器中位置固定的场景。

参数：

参数名	类型	必填	说明
value	Position | Edges12+ | LocalizedEdges12+	是	不支持在宽高为零的布局容器上设置。 当父容器为RelativeContainer, 且子组件设置了alignRules属性, 则子组件的position属性不生效。

 

示例：

@Entry
@Component
struct TestIndex {
  build() {
    Column() {
      Row() {
        Text('1').size({ width: '30%', height: '50' }).backgroundColor(Color.Red)

        /** 坐标（0,0） */
        Text('2').size({ width: '50', height: '30' }).backgroundColor(Color.Orange)
          .position({ x: 0, y: 0 }) // 坐标（0,0）

        /** 坐标 (50,30) */
        Text('3').size({ width: '60%', height: '30' }).backgroundColor(Color.Yellow)
          .position({ x: 50, y: 30 }) // 坐标(50,30)

        /** 坐标 (-20,-30) */
        Text('4').size({ width: '20', height: '20' }).backgroundColor(Color.Red)
          .position({ x: -20, y: -20 }) // 坐标(-20,-30)

        /** 坐标('50%','70%') */
        Text('5').size({ width: '50%', height: '50' }).backgroundColor(Color.Pink)
          .position({ x: '50%', y: '70%' }) // 坐标('50%','70%')

      }.width('90%').height(300).backgroundColor(Color.Gray)

    }.width('100%').height('100%')
  }
}