微信小程序 - 相对定位和绝对定位

相对定位relative,绝对定位absolute

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

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

相对定位:relative

position:relative;    /*相对定位*/
left:50rpx; /*相对于自己往右偏离50*/
top:50rpx; /*相对于自己往下偏离50*/

绝对定位:absolute

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

效果:

.bei {
width: 100rpx;
height: 100rpx;
flex: 1;
border-radius: 50%;
background-color: #00b2ee;
margin: 30rpx auto 0;
} .bei image {
width: 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 点赞

微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径的更多相关文章

  1. 《微信小程序七日谈》- 第四天:页面路径最多五层?导航可以这么玩

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...

  2. uni微信小程序优化,打包后的import vue路径是可删除的

    这次的优化我公司项目主包只减小了32kb,但是减小的不仅仅是主包,所有分包均在没有改动任何业务代码的情况下完成了压缩空间的优化. 主包分包压缩空间的优化都要视项目而定,32kb只是我公司的小程序项目. ...

  3. 微信小程序:优化接口代码-提取公共接口路径

    方法一.将公共部分提取出来定义为baseURL变量 简化url,把里面公共部分提取出来.如https://api-hmugo-web.itheima.net/api/public/v1/categor ...

  4. 微信小程序开发教程

    9月21日晚发布的微信公众平台·小程序内侧邀请,微信应用号(小程序,「应用号」的新称呼)终于来了!目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子? 怎样 ...

  5. 初探微信小程序

    摘要 最近闲下来了,就准备了解下微信小程序的内容.首先从目录结构开始吧. 创建项目 工具下载:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/do ...

  6. 微信小程序简易教程

    刚接触到微信小程序开发,这里做一个简单的教程: 1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开 ...

  7. 开发一个微信小程序教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在 小程序发布流程->小程序 ...

  8. 开发一个微信小程序项目教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...

  9. 微信小程序实例教程(一)

    序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序 ...

随机推荐

  1. stm32定时器时钟以及中间对齐模式

    在永磁同步电机的控制中,需要对电机的三相定子施加一定的电压,才能控制电机转动.现在用的较多的是SVPWM(SVPWM的具体原理会在后面另写一篇博客说明),要想产生SVPWM波形,需要控制的三相电压呈如 ...

  2. 修改Myeclipse的文件默认为UTF-8编码

    一.工程编码默认调整 windows->Preferences...打开"首选项"对话框, 左侧导航树,导航到general->Workspace,右侧 Text fi ...

  3. PHP 利用PHPExcel 文件导入(也可保存到本地或者服务器)、导出

    首先需要去官网http://www.php.cn/xiazai/leiku/1491,下载后只需要Classes目录下的文件即可. 1.PHPExcel导出方法实现过程 1 2 3 4 5 6 7 8 ...

  4. Javaweb过滤器

    http://blog.csdn.net/reggergdsg/article/details/52821502

  5. Asp.net Zero 应用实战-最初部署问题

    此时用的是aspnet-zero-core-4.3.0 1.前两天vs2017刚刚最新升级了,打开后就报错,然后就根据提示把每个项目文件中添加了 <PropertyGroup> <E ...

  6. 解决Ubuntu 16.04 上Android Studio2.3上面运行APP时提示DELETE_FAILED_INTERNAL_ERROR Error while Installing APKs的问题

    本人工作环境:Ubuntu 16.04 LTS + Android Studio 2.3 AVD启动之后,运行APP,报错提示: DELETE_FAILED_INTERNAL_ERROR Error ...

  7. [Ionic] Error: No provider for Http! Error: No provider for Http!

    1. 打开src/app/app.module.ts 2. 在最上面导入 import{HttpModule} from '@angular/http'; 3. 在imports块中加入:HttpMo ...

  8. Scrapy爬虫框架的学习

    第一步安装 首先得安装它,我使用的pip安装的 因为我电脑上面安装了两个python,一个是python2.x,一个是python3.x,所以为了区分,所以,在cmd中,我就使用命令:python2 ...

  9. 猜数字游戏;库的使用:turtle

    myNum = print('猜字游戏\n') while True: guess = int(input('请输入一个数:')) if guess > myNum: print('不对哦猜大了 ...

  10. 网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放

    网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放. <meta name="viewport" conten ...