HarmonyOS第二十课——（绝对定位position、组件层级zIndex）

一、绝对定位-position

作用：控制组件位置，可以实现层叠效果

特点： 1、参照父组件左上角 进行偏移 2、绝对定位后的组件不占用自身原来的位置。

语法:
.position(位置对象)

参数:
{x:水平偏移量，y:垂直偏移量}

Text("文本组件")
  .position({
    x:0,
    y:0
  })

二、zIndex 层级

作用:调整组件层级

语法:zIndex(数字)

参数:取值为整数数字，取值越大，显示层级越高

Column(){
  Text("1")
    .width(100)
    .height(100)
    .backgroundColor(Color.Red)
    .fontColor(Color.White)
    .textAlign(TextAlign.Center)

  Text("2")
    .width(100)
    .height(100)
    .backgroundColor(Color.Orange)
    .fontColor(Color.White)
    .textAlign(TextAlign.Center)
    .position({x:10,y:10})

  Text("3")
    .width(100)
    .height(100)
    .backgroundColor(Color.Pink)
    .fontColor(Color.White)
    .textAlign(TextAlign.Center)
}
.width(300)
.height(300)
.backgroundColor(Color.White)
.margin({top:20})

使用 zIndex

Column(){
    Text("1")
      .width(100)
      .height(100)
      .backgroundColor(Color.Red)
      .fontColor(Color.White)
      .textAlign(TextAlign.Center)
      .zIndex(1)

    Text("2")
      .width(100)
      .height(100)
      .backgroundColor(Color.Orange)
      .fontColor(Color.White)
      .textAlign(TextAlign.Center)
      .position({x:20,y:20})

    Text("3")
      .width(100)
      .height(100)
      .backgroundColor(Color.Pink)
      .fontColor(Color.White)
      .textAlign(TextAlign.Center)
  }
  .width(300)
  .height(300)
  .backgroundColor(Color.White)
  .margin({top:20})


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

三、position 、zIndex 总结

aposition绝对定位:可以控制组件位置，可以实现层叠效果

1. 相对于父组件左顶点进行偏移(调整位置)
2. 原本的位置不占了，且可以任意调整位置，，不影响其他元素
3. 后面的组件明显层次更高，会盖住前面的组件
4. 不动结构的情况下，调整组件的层级.zIndex(数字)