找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序相对定位、绝对定位、相对路径、绝对路径区别

[复制链接]
查看: 87|回复: 1
最佳答案
0 

5

主题

5

帖子

120

积分

新人求带

积分
120
 楼主| 发表于 2018-12-6 10:49:35 | 显示全部楼层 |阅读模式
微信小程序 - 相对定位和绝对定位

相对定位relative,绝对定位absolute

相对定位:元素是相对自身进行定位,参照物是自己.

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

相对定位:relative
  1. position:relative;    /*相对定位*/
  2. left:50rpx;    /*相对于自己往右偏离50*/
  3. top:50rpx;     /*相对于自己往下偏离50*/
复制代码

绝对定位:absolute
  1. position: absolute;
  2. left: 50rpx;
  3. top: 50rpx;
复制代码

效果:
20181205095243690.png

  1. .bei {
  2.   width: 100rpx;
  3.   height: 100rpx;
  4.   flex: 1;
  5.   border-radius: 50%;
  6.   background-color: #00b2ee;
  7.   margin: 30rpx auto 0;
  8. }

  9. .bei image {
  10.   width: 90rpx;
  11.   height: 90rpx;
  12.   margin-top: 5rpx;
  13. }

  14. .text {
  15.   font-size: 30rpx;
  16.   color: #fff;
  17.   position: relative;
  18.   top: 20rpx;
  19. }
复制代码

.wxml
  1. <view class='bei'>
  2.           <image src='/images/Attendance-early.png' style="display: {{none}};"></image>
  3.           <text class='text'>{{zao}}</text>
  4. </view>
复制代码

position【定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset】

相对路径和绝对路径

绝对路径: 以“/”开头代表根目录

相对路径:
  1. ../../a/index
  2. 或者:
  3. a/index
复制代码

回复

使用道具 举报

最佳答案
0 

0

主题

400

帖子

4413

积分

专家路上

积分
4413
发表于 3 天前 | 显示全部楼层
非常不错,很好呢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com