微信小程序位置定位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;//显示为3列column-gap: 5rpx;//列与列之间间隙大小
}.imgline {width: 100%;position: relative;//相对定位，子元素的absolute才能生效
}.cancelI {position: absolute;//父元素的position位置固定，这个绝对定位才会生效right: 2px;//位于父元素的右边 2pxleft: 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;
}

展示效果：

微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题相关推荐

php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...
微信小程序02【配置详解、生命周期-app对象使用、页面跳转详解】
学习地址:https://www.bilibili.com/video/BV1sx411z77P 笔记01:https://blog.csdn.net/weixin_44949135/article/ ...
微信小程序框架(一)-全面详解（学习总结---从入门到深化）
目录小程序与普通网页开发的区别体验小程序微信小程序账号申请微信小程序开发者工具下载安装创建项目开发者工具说明小程序目录结构描述整体的 app 描述各自页面的 page 全局配置_Pa ...
微信小程序全局配置参数详解app.json
全局配置 cc文件内容为一个 JSON 对象,有以下属性: 配置项 entryPagePath 指定小程序的默认启动路径(首页),常见情景是从微信聊天列表页下拉启动.小程序列表启动等.如果不填,将默认 ...
微信小程序框架(二)-全面详解（学习总结---从入门到深化）
目录组件_基础视图容器 view 文本 text 图片 image 组件_滑块视图容器基本实现 Swiper常用属性说明组件_滚动视图区域水平滚动垂直滚动常用属性组件_icon 图标使 ...
微信小程序框架(四)-全面详解（学习总结---从入门到深化）
目录路由_navigateTo 页面跳转携带参数返回上一级页面路由_redirectTo 页面跳转路由_reLaunch 页面跳转路由_switchTab 实现 tabbar 页面跳转交 ...
微信小程序（三）详解篇
一.什么是小程序(了解) 小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念 ...
新手微信小程序制作教程步骤详解！
制作微信小程序方法: 1.在微信公众平台上申请一个小程序账号,申请完成之后需要进行微信认证,并且需要缴纳300元的认证费用.如果不缴纳300元的费用,微信小程序商城没有开通支付功能. 2.新建一个空白 ...
微信小程序框架(五)-全面详解（学习总结---从入门到深化）
目录 UI框架_TDesign 引入TDesign UI框架_TDesign组件 Rate 评分 Toast 轻提示 UI框架_Vant 使用方式引入组件 UI框架_Vant组件 Overlay 遮 ...

微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题

微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题相关推荐

最新文章

热门文章

微信小程序 位置定位position详解，相对定位relative，绝对定位absolute相关问题

微信小程序 位置定位position详解，相对定位relative，绝对定位absolute相关问题相关推荐

最新文章

热门文章

微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题

微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题相关推荐