微信小程序 位置定位position详解,相对定位relative,绝对定位absolute相关问题
一、位置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相关问题的更多相关文章
- 微信小程序 this和that详解及简单实例
微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报 ...
- 微信小程序获取用户手机号详解
最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话 ...
- 【微信小程序】支付过程详解
一.介绍 今天跟大家分享微信小程序集成支付. 二.分析 1.小程序支付API 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.html ...
- 微信小程序--问题汇总及详解之form表单
附上微信小程序开发文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html form表单: 当点击 <form/> ...
- 微信小程序支付之代码详解
微信小程序自带的一套规则,类似vue语法,但是好多功能都集成在api中,给了很多初学者轮子,所以首先要熟悉这些api,忘记可照官网继续开发 这里主要说下微信小程序的支付,原理类似上篇介绍的公众网页支付 ...
- 微信小程序项目wx-store代码详解
这篇文章会很长,非常长,特别长,无敌长. 真的是挤牙膏般的项目进度,差不多是8月底有开始这个项目的想法,时至今日都1个多月了,抛去频繁的加班时间,王者时间,羽毛球时间...见缝插针的写这个项目,我竟然 ...
- 微信小程序flex容器属性详解
flex容器属性详解 flex-direction决定元素的排列方向 flex-wrap决定元素如何换行 flex-flow 是 flex-direction 和flex-wrap的简写 justif ...
- 微信小程序--问题汇总及详解之图片上传和地图
地图用的是百度的地图,链接:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getlocation 获取日期时间可以用小程序里自带的js文件 ...
- 微信小程序~生命周期方法详解
生命周期是指一个小程序从创建到销毁的一系列过程 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面 先来看一张小程序项目结构 从上图可以看出,根目录下面有包含了app.js ...
随机推荐
- redo log和bin log
讲redolog和binlog之前,先要讲一下一条mysql语句的执行过程. 1.client的写请求到达连接器,连接器负责管理连接.验证权限: 2.然后是分析器,负责复习语法,如果这条语句有执行过, ...
- DataTable通过Select进行过滤
DataTable方法测试 //测试DataTable的select DataTable dt = new DataTable(); //a.OrderType, //a.[Status] dt.Co ...
- JavaScript 中 var 和 let 和 const 关键字的区别
var与let.const的区别 在最新的 ES6 中,新添加了两个用于变量声明的关键字 let 和 const 一.var声明的变量会挂载在window上,而let和const声明的变量不会: va ...
- ajax跨域请求webservice webconfig配置
<configuration> <system.web> <compilation debug="true" targetFramework=&quo ...
- h5格式化微信 nickname 保留第一个字,其余用*显示
截取微信nickname中需要注意的是,表情符号和特殊字符,如果你不用正则过滤掉的话,使用slice(0,1)直接截取第一个字符串是不行的,因为表情符号占用两个字节,截取一半,ios会报错,andro ...
- TOMCAT上传下载文件
实现下载 修改server.xml修改web.xml 实现上传 实现客户端的上传post请求代码实现 实现服务端的处理 小结 实现下载 实现下载需要 - 修改Tomcat中的 ...
- sql server 事务和锁的作用
事务 事务就是作为一个逻辑工作单元的SQL语句,如果任何一个语句操作失败那么整个操作就被失败,以后操作就会回滚到操作前状态,或者是上个节点.为了确保要么执行,要么不执行,就可以使用事务.而锁是实现事务 ...
- MySQL Multi-Range Read(MRR 索引多范围查找) 原理与解析
原理: 如果基表很大,数据没有被缓存,在二级索引上使用范围扫描读取行可能会导致大量的随机磁盘访问.使用Multi-Range Read新特性,mysql可以减少对磁盘的随机读的次数:首先,mysql只 ...
- 一个类中域(field)的首字母不要大写
首先这种写法不规范, 其次,至少在AJAX交互的情况下, 如果首字母大写,会无法与前端相同名称的JSON属性相绑定. 如 data:{'Name':'2017-10-19'} public NameI ...
- redis简单消息队列
<?php $redis = new Redis(); $redis->connect('127.0.0.1',6379); $redis->flushall(); $redis-& ...