微信小程序——UI精讲

相对定位和绝对定位

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

.i2{
  position: relative;/*相对定位*/
  top:50rpx;
  left:50rpx;
}

相对定位

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

.i2{
  position: absolute;/*绝对定位*/
  left: 50rpx;
  top: 50rpx;
}

实例1父级元素没有定位

先对父级进行相对定位

.container{
  height: 100%;
  width: 100%;
  background-color: skyblue;
  position: relative;
  left: 200rpx;
  top:200rpx;
}

再对这个元素进行觉得定位

  position: absolute;
  left: 50rpx;
  top: 50rpx;

实例2

对父级元素进行了定位，子级元素的绝对定位只能相对于父级进行定位

实例3

绝对定位如下图

绝对定位

**昨天加今天一天，我们学习了是同容器view中的flex和元素的定位。只是把教程中的练习抽丝剥茧用图片形象化。