定位

相对定位

通过给标签添加 class="pi-rela" ，可以达到设置 position:relative 的效果

<template>
  <view class="pi-rela">
  </view>
</template>

绝对定位

通过给标签添加 class="pi-abso" ，可以达到设置 position:absolute 的效果

同时，还可以使用 pi-abso-center 、pi-abso-lt 、pi-abso-lb 、pi-abso-rt 、pi-abso-rb 、pi-abso-full 来控制标签在父节点中的位置

• pi-abso-center 节点位于父节点中心
• pi-abso-lt 节点位于父节点左上角
• pi-abso-lb 节点位于父节点左下角
• pi-abso-rt 节点位于父节点右上角
• pi-abso-rb 节点位于父节点右下角
• pi-abso-full 节点撑满父节点

<template>
  <view class="pi-rela">
    <view class="pi-abso" />
    <view class="pi-abso-center" />
    <view class="pi-abso-lt" />
    <view class="pi-abso-lb" />
    <view class="pi-abso-rt" />
    <view class="pi-abso-rb" />
    <view class="pi-abso-full" />
  </view>
</template>

固定布局

通过给标签添加 class="pi-fixed" ，可以达到设置 position:fixed 的效果。

同时，还可以使用 pi-fixed-center 、pi-fixed-lt 、pi-fixed-lb 、pi-fixed-rt 、pi-fixed-rb 、pi-fixed-full 来控制标签在窗口中的位置

• pi-fixed-center 节点位于窗口中心
• pi-fixed-lt 节点位于窗口左上角
• pi-fixed-lb 节点位于窗口左下角
• pi-fixed-rt 节点位于窗口右上角
• pi-fixed-rb 节点位于窗口右下角
• pi-fixed-full 节点撑满窗口

<template>
  <view class="pi-rela">
    <view class="pi-fixed" />
    <view class="pi-fixed-center" />
    <view class="pi-fixed-lt" />
    <view class="pi-fixed-lb" />
    <view class="pi-fixed-rt" />
    <view class="pi-fixed-rb" />
    <view class="pi-fixed-full" />
  </view>
</template>