小程序的相对定位与绝对定位

相对定位：元素是相对自身进行定位，参照物是自己。

绝对定位：元素是相对离它最近的一个已定位的父级元素进行定位

不采用任何定位：

.wxml文件
<view class="style_01"></view>

.wxss文件
page{
  background-color: #eee  //便于区分，将整个页面设置为灰色
}
.style_01{
  height: 500rpx;
  width: 500rpx;
  background-color: #99ff99;

}

下面是相对定位：

.wxml文件
<view class="style_01"></view>

.wxss文件
page{
  background-color: #eee
}
.style_01{
  height: 500rpx;
  width: 500rpx;
  background-color: #99ff99;
  position: relative;   //采用相对定位
  top: 100rpx;         //相对自己的原位置向下偏移100rpx
  left: 100rpx;         //相对自己的原位置向右偏移100rpx
}

绝对定位：

.wxml文件
<view class="style_01">
<view class="style_02"></view>
</view>

.wxss文件
page{
  background-color: #eee
}
.style_01{
  height: 500rpx;
  width: 500rpx;
  background-color: #99ff99;
  position: relative;
  top: 100rpx;
  left: 100rpx;
}

.style_02{
  height: 100rpx;
  width: 100rpx;
  background-color: #66ff;
  position: absolute;
  top:50rpx;    //相对于父级绿色块下移50rpx
  left: 50rpx;   //相对于父级绿色块右移50rpx
}

说明：如果绝对定位position: absolute不指定父级元素，那么它将相对于整个页面进行定位。

如果想深入了解，下面这篇文章不错。