RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位置关系。

子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。

相对布局示意图

锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。

在水平方向上，可以设置left、middle、right的锚点。

在竖直方向上，可以设置top、center、bottom的锚点。

为了明确定义锚点，必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。ID默认为“__container__”，其余子元素的ID通过id属性设置。不设置id的组件能显示，但是不能被其他子组件作为锚点，相对布局容器会为其拼接id，此id的规律无法被应用感知。

互相依赖，环形依赖时容器内子组件全部不绘制。同方向上两个以上位置设置锚点，但锚点位置逆序时此子组件大小为0，即不绘制。

话不多少上代码看注解看效果图！！！

//父组件为锚点，__container__代表父容器的ID
let AlignR1: Record<string, Record<string, string | VerticalAlign | HorizontalAlign>> = {
  //在竖直方向上，对齐位置可以设置为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom
  'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
  //在水平方向上，对齐位置可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End
  'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }
}

let AlignR2: Record<string, Record<string, string | VerticalAlign | HorizontalAlign>> = {
  'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
  'right': { 'anchor': '__container__', 'align': HorizontalAlign.End }
}

let AlignR3: Record<string, Record<string, string | VerticalAlign | HorizontalAlign>> = {
  'bottom': { 'anchor': '__container__', 'align': VerticalAlign.Bottom },
  'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }
}

//以兄弟元素为锚点
let AlignR4: Record<string, Record<string, string | VerticalAlign | HorizontalAlign>> = {
  'top': { 'anchor': 'row3', 'align': VerticalAlign.Top },
  'left': { 'anchor': 'row3', 'align': HorizontalAlign.End }
}

let Mleft: Record<string, number> = { 'left': 10 }
let BWC: Record<string, number | string> = { 'width': 2, 'color': '#6699FF' }

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {
      Row() {
        Text('row1')
      }
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor('#a3cf62')
      .alignRules(AlignR1)
      .id("row1")

      Row() {
        Text('row2')
      }
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor('#00ae9d')
      .alignRules(AlignR2)
      .id("row2")

      Row() {
        Text('row2')
      }
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor('#00ae9d')
      .alignRules(AlignR3)
      .id("row3")

      Row() {
        Text('row4')
      }
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor('#00ae9d')
      .alignRules(AlignR4)
      .id("row4")
      //额外偏移设置offset
      .offset({x:20,y:-20})
    }.width(300).height(300)
    .margin(Mleft)
    .border(BWC)
  }
}