微信小程序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;
}

最后的效果就是这样

图片.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>

图片.png

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

再看absolute:

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

图片.png

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

fixed：

图片.png

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

原文地址:https://www.jianshu.com/p/993737730753