一、位置position【定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset】
1.static:元素框正常生成,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或者多个行框,置于其父元素中。
2.relative:【相对于自己本身在流中的位置的偏移】元素框偏移某个距离。元素扔保持其未定位前的形状,它原来所占的空间扔保留。
3.absolute:【相对于父元素 —— 前提是父元素的位置是确定的】元素框从文档流中删除,并相对于其包含块定位,包含快可能是文档中的另一个元素或者初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
4.fixed:元素框的表现类似于将position 设置为absolute,不过其包含块是视窗本身。
5.inherit:继承父元素的position位置。—-任何版本的IE都不支持属性值:inherit
6.-ms-page:位置取决于absolute的模式。
7.initial:将指定的值表示为属性的初始值。
8.unset:设置了“inherit”和“initial”,根据属性是否被继承。

【定义position不为static的元素时,可以使用位置】top,right,bottom,left(取值:auto/直接数值/百分比)

示例:

<view class='imgbox'>
<view class='imgline' wx:for="{{imgs}}" wx:for-item="i">
<image bindtap='tapImg' src='{{i.path}}' data-id='{{index}}'></image>
<icon type='cancel' bindtap='tapCancel' color='red' size='20' class='cancelI' data-id='{{index}}'></icon>
<text class='item_txt' data-id='{{index}}' bindtap='tapAddLabel'>{{i.label}}</text>
</view>
</view>

wxss代码:

.imgbox {
width: 100%;
height: 100%;
column-count:;//显示为3列
column-gap: 5rpx;//列与列之间间隙大小
} .imgline {
width: 100%;
position: relative;//相对定位,子元素的absolute才能生效
} .cancelI {
position: absolute;//父元素的position位置固定,这个绝对定位才会生效
right: 2px;//位于父元素的右边 2px
left: auto;
top: 10px;
} .item_txt {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 25px;
font-size: 13px;
background-color: #999;
color: white;
text-align: center; //这两行保证文本在text中水平垂直居中
line-height: 25px; //也可以使用:display:flex;flex-direction:column;align-items:center;justify-content:center;[文字在text中水平,垂直居中]
} image {
width: 100%;
height: 250rpx;
margin-top: 5px;
}

展示效果:

转: https://blog.csdn.net/yingtian648/article/details/80047949

微信小程序 位置定位position详解,相对定位relative,绝对定位absolute相关问题的更多相关文章

  1. 微信小程序 this和that详解及简单实例

    微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报 ...

  2. 微信小程序获取用户手机号详解

    最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话 ...

  3. 【微信小程序】支付过程详解

    一.介绍 今天跟大家分享微信小程序集成支付. 二.分析 1.小程序支付API 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.html ...

  4. 微信小程序--问题汇总及详解之form表单

    附上微信小程序开发文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html form表单: 当点击 <form/> ...

  5. 微信小程序支付之代码详解

    微信小程序自带的一套规则,类似vue语法,但是好多功能都集成在api中,给了很多初学者轮子,所以首先要熟悉这些api,忘记可照官网继续开发 这里主要说下微信小程序的支付,原理类似上篇介绍的公众网页支付 ...

  6. 微信小程序项目wx-store代码详解

    这篇文章会很长,非常长,特别长,无敌长. 真的是挤牙膏般的项目进度,差不多是8月底有开始这个项目的想法,时至今日都1个多月了,抛去频繁的加班时间,王者时间,羽毛球时间...见缝插针的写这个项目,我竟然 ...

  7. 微信小程序flex容器属性详解

    flex容器属性详解 flex-direction决定元素的排列方向 flex-wrap决定元素如何换行 flex-flow 是 flex-direction 和flex-wrap的简写 justif ...

  8. 微信小程序--问题汇总及详解之图片上传和地图

    地图用的是百度的地图,链接:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getlocation 获取日期时间可以用小程序里自带的js文件 ...

  9. 微信小程序~生命周期方法详解

    生命周期是指一个小程序从创建到销毁的一系列过程 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面 先来看一张小程序项目结构 从上图可以看出,根目录下面有包含了app.js ...

随机推荐

  1. 第一周助教小结——发布作业&线上答疑

    第一周助教小结 助教博客:https://www.cnblogs.com/jason5689/ 本周点评数目:0份 由于发布的作业还未截至,第一次的作业点评还没开始进行,就描述一下评论博客前的感受吧 ...

  2. PHP字符串截取,计算字符串长度

    /** * 字符串截取,支持中文和其他编码 * @param [string] $str [字符串] * @param integer $start [起始位置] * @param integer $ ...

  3. MathJax.js是做什么的

    MathJax.js是做什么的 一.总结 一句话总结: 用 MathJax 可以在浏览器页面很美观的显示数学公式 1.MathJax 语法? $$...$$之间是单行公式,$...$之间是行内公式 实 ...

  4. P1005 矩阵取数游戏[区间dp]

    题目描述 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的\(m*n\)的矩阵,矩阵中的每个元素\(a_{i,j}\)均为非负整数.游戏规则如下: 每次取数时须从每行各取走一个元素,共n个.经过m次后 ...

  5. 0014SpringBoot结合thymeleaf实现登录功能

    该登录功能需要实现的需求如下: 1.输入用户名密码,如果验证通过,进入首页,并显示登录的用户名 2.如果验证不通过,则重新进入登录页面,并显示“用户名密码错误” 3.如果未经登录,不能直接访问首页等静 ...

  6. CSS 布局和 BFC

    什么是 BFC 在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的.W3C对BFC的定义如下:浮动元素和绝对定位元素,非块级盒子 ...

  7. POI之SXSSFWorkbook大量数据导出至excel

    一:简介          SXSSFWorkbook是用来生成海量excel数据文件,主要原理是借助临时存储空间生成excel,          SXSSFWorkbook专门处理大数据,对于大型 ...

  8. Redis学习之一--基础知识

    一.定义 REmote DIctionary Server(Redis) 是一个以字典结构存储数据的key-value存储系统:使用ANSI C语言编写.遵守BSD协议.支持网络.可基于内存亦可持久化 ...

  9. Bzoj 1566: [NOI2009]管道取珠(DP)

    1566: [NOI2009]管道取珠 Time Limit: 20 Sec Memory Limit: 650 MB Submit: 1558 Solved: 890 [Submit][Status ...

  10. UOJ 449 【集训队作业2018】喂鸽子 【生成函数,min-max容斥】

    这是第100篇博客,所以肯定是要水过去的. 首先看到这种形式的东西首先min-max容斥一波,设\(f_{c,s}\)表示在\(c\)只咕咕中,经过\(s\)秒之后并没有喂饱任何一只的概率. \[ \ ...