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

相对定位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. 聚簇索引(Clustered Index)和非聚簇索引 (Non- Clustered Index)

    本文转自https://my.oschina.net/u/1866821/blog/297673 索引的重要性数据库性能优化中索引绝对是一个重量级的因素,可以说,索引使用不当,其它优化措施将毫无意义. ...

  2. How to change system keyboard keymap layout on CentOS 7 Linux

    The easiest way to swap between keymaps and thus temporarily set keys to different language by use o ...

  3. centos7 安装mysql5.7.20(yum方式)

    windows下安装mysql请访问:windows下mysql5.7.20安装(zip包方式) 一.安装过程 1.安装wget yum install wget 2.查找yum源名称 在mysql官 ...

  4. php JS 导出表格特殊处理

    但是这样导出身份证号会变为科学计数: 解决方法就是: 我们了解一下excel从web页面上导出的原理.当我们把这些数据发送到客户端时,我们想让客户端程序(浏览器)以excel的格式读取 它,所以把mi ...

  5. impala操作hase、hive

    impala中使用复杂类型(Hive):    如果Hive中创建的表带有复杂类型(array,struct,map),且储存格式(stored as textfile)为text或者默认,那么在im ...

  6. makefile入门-初步了解

    自己开始学习makefile是由于VScode配置工程文件,看别人的配置不是很懂,于是决定入门学习下makefile. 先来说说makefile是做什么用的:makefile可以实现工程的自动化编译, ...

  7. [模拟][NOIP2015]神奇的幻方

    神奇的幻方 题目描述 幻方是一种很神奇的N∗ N矩阵:它由数字 1,2,3, … … , N ∗ N 构成,且每行.每列及两条对角线上的数字之和都相同. 当 N为奇数时,我们可以通过以下方法构建一个幻 ...

  8. LinkedList - 好一个双向链表

    LinkedList是常用的集合结构之一,数据存储结构为链式存储,每个节点都有元素.前指针和后指针,指针指向了前节点和后节点的位置.同是LinkedList也是一个队列,实现了Deque接口,Dequ ...

  9. Parsing error was found in mapping #{}. Check syntax #{property|(expression), var1=value1, var2=val错误

    xml中有一个语法错误,整个都错了, 虽然只调用了select查询的方法,但是update中也有语法错误

  10. nlp L1

    前向最大匹配: 最大匹配出的词必须保证下一个扫描不是词表中的词或词的前缀才可以结束. 正向最大匹配算法:从左到右将待分词文本中的几个连续字符与词表匹配,如果匹配上,则切分出一个词.但这里有一个问题:要 ...