微信小程序position属性的探究

本人从事iOS开发，在学习小程序过程中老是被position这个属性弄迷糊，就针对这个属性做了一下验证：

先看如下代码：

wxml

<view class="container">
  <view class='view1'>1</view>
  <view class='view2'>2</view>
  <view class='view3'>3</view>
  <view class='view4'>4</view>
</view>

wxss

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: bisque;
}

.view1 {
  width: 128rpx;
  height: 128rpx;
  background-color: red;
}
.view2 {
  width: 128rpx;
  height: 128rpx;
  background-color: rebeccapurple;
}
.view3 {
  width: 128rpx;
  height: 128rpx;
  background-color: royalblue;
}
.view4 {
  width: 128rpx;
  height: 128rpx;
  background-color: paleturquoise;
}

最后的效果就是这样

image.png

现在我们对view2 添加下面这个类

.other {
  position: relative;
  top: 30rpx;
  left: 50rpx;
}

wxml中修改：

<view class="container">
  <view class='view1'>1</view>
  <view class='view2 other'>2</view>
  <view class='view3'>3</view>
  <view class='view4'>4</view>
</view>

image.png

可见relative这个属性是在保留自己原来的位置不变的情况下，在原来的位置中进行偏移。

---

再看absolute:

.other {
  position: absolute;
  top: 30rpx;
  left: 50rpx;
}

image.png

发现absolute并没有保留原来的位置，并且坐标偏移是以最近的父视图为准进行偏移。

---

fixed：

image.png

元素框的表现类似于将position 设置为absolute，不过其包含块是视窗本身。