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

相对定位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. 201771010134杨其菊《面向对象程序设计(java)》第十五周学习

    第十五周学习总结 第一部分:理论知识 JAR文件: 应用程序首选项存储: Java Web Start JAR文件: 1.Java程序的打包:程序编译完成后,程序员将.class文件压缩打包为.jar ...

  2. Movavi Video Editor 15 Plus Mac怎样更改视频的分辨率?

    使用Movavi Video Editor 15您可以对视频进行切割和修剪,裁剪和旋转,色度键,视频稳定以及画中画等很多的编辑,该软件操作简单,就算是新手也无需担心操作问题,本文讲述了Movavi V ...

  3. java38

    字符串内存分析 String str = new String("ABCD") 会先在堆中开辟一个空间,然后去常量池(方法区)中寻找是否有该变量,如果有,直接引用常量池中的内容 如 ...

  4. 修改maven的源地址为阿里源

    在放maven的安装文件里,找到settings.xml,如下图所示 将默认的源地址改为阿里源,需要在settings.xml文件相应的位置上加上如下的一串:  <mirror> < ...

  5. 使用kbmmw 的REST 服务实现上传大文件

    我们在使用kbmmw的REST 服务时,经常会下载和上传大文件.例如100M以上的.kbmmw的rest服务中 提供标准的文件下载,上传功能,基本上就是打开文件,发送,接收,没有做特殊处理.这些对于文 ...

  6. gulp打包工具

    首先安装全局gulp $ npm install --global gulp 下载成功后 新建一个项目或者一个文件夹(做测试) mkdir testgulp 在该文件或者项目下下载gulp工具 $ n ...

  7. HTTP Status 404 – Not Found

    一般都是配置中的问题,这次发现扫描controller时,自己的包是com.aaa.conlller,而springmvc.xml中扫描的是com.aaa.controller,,多写了一个l

  8. 不支持find_element_by_name元素定位方法,抛不支持find_element_by_name元素定位方法,会抛如下错误 org.openqa.selenium.InvalidSelectorException: Locator Strategy 'name' is not supported for this session的解决

    appium1.5后不支持find_element_by_name元素定位方法,会抛如下错误 org.openqa.selenium.InvalidSelectorException: Locator ...

  9. 基于接口的 InvocationHandler 动态代理(换种写法)

    InvocationHandler is the interface implemented by the invocation handler of a proxy instance. Each p ...

  10. ADO.NET MSSSQLServer 操作简要总结

    1).数据库操作首先应该是链接,链接的方式有多种,不论怎样实现最终都是把链接字符串赋值给实现了 继承自DbConnection 类的SqlConnection类实例的ConnectionString属 ...