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 {
   128rpx;
  height: 128rpx;
  background-color: red;
}
.view2 {
   128rpx;
  height: 128rpx;
  background-color: rebeccapurple;
}
.view3 {
   128rpx;
  height: 128rpx;
  background-color: royalblue;
}
.view4 {
   128rpx;
  height: 128rpx;
  background-color: paleturquoise;
}

最后的效果就是这样

现在我们对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>

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

再看absolute:

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

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

fixed：

 

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

 

 

 

转于作者：温柔vs先生
链接：https://www.jianshu.com/p/993737730753
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。