效果展示
知识点
绝对定位
作用：控制组件位置，可以实现层叠效果
特点：
- 参照 父组件左上角 进行偏移
- 绝对定位后的组件 不再占用自身原有位置
语法：.position(位置对象)
参数：{ x: 水平偏移量 , y: 垂直偏移量}
zIndex层级
作用：调整组件层级
语法：.zIndex(数字)
参数：取值为整数数字，取值越大，显示层级越高
代码展示
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Column() {Text("VIP").position({x: 0,y: 0}).zIndex(1).width(70).height(40).textAlign(TextAlign.Center).fontSize(20).fontWeight(700).border({width: 5,color: "#F8EA87"}).borderRadius({topLeft: 20,bottomRight: 20}).fontColor("#F8EA87").backgroundColor("#F1932D")Image($r("app.media.position_moco")).width('99%').borderRadius(20)Row({ space: 20 }) {Image($r("app.media.position_earphone")).padding(5).width(30).borderRadius(15).fillColor("#fff").backgroundColor("#0AC1EF")Text("飞狗MOCO").fontSize(24).fontWeight(700)}.padding({left: 20}).margin({top: 10,bottom: 10}).width("100%")}.width(300).backgroundColor("#fff")}.padding(20).width("100%").height("100%").linearGradient({angle: 135, // 设置颜色渐变起始角度为顺时针方向45°colors: [[0xceeff2, 0.0],[0xf2e0de, 0.4],[0xFFFFFF, 0.8],]})}
}
