微信小程序 - 相对定位和绝对定位
相对定位relative,绝对定位absolute
相对定位:元素是相对自身进行定位,参照物是自己.
绝对定位:元素是相对离它最近的一个父级元素进行定位.
相对定位:relative
position:relative; /*相对定位*/
left:50rpx; /*相对于自己往右偏离50*/
top:50rpx; /*相对于自己往下偏离50*/
绝对定位:absolute
position: absolute;
left: 50rpx;
top: 50rpx;
效果:
.bei {
100rpx;
height: 100rpx;
flex: 1;
border-radius: 50%;
background-color: #00b2ee;
margin: 30rpx auto 0;
}
.bei image {
90rpx;
height: 90rpx;
margin-top: 5rpx;
}
.text {
font-size: 30rpx;
color: #fff;
position: relative;
top: 20rpx;
}
.wxml
<view class='bei'>
<image src='/images/Attendance-early.png' style="display: {{none}};"></image>
<text class='text'>{{zao}}</text>
</view>
position【定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset】
相对路径和绝对路径
绝对路径: 以“/”开头代表根目录
相对路径:
../../a/index
或者:
a/index
达叔小生:往后余生,唯独有你
You and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
- 小礼物走一走 or 点赞