[wx·part]微信小程序通过positon:absolute布局解决元素浮动显示后，如何设置显示位置问题

前言：

今天决定“从操旧业”了，感觉自己被隔离世外一样。今天遇到一个严重的手机自适应问题，在开发微信小程序时，在微信开发者工具中通过一些绝对的写法。微信开发者工具上显示正确，但是在真机上显示位置出人意料。通过慢慢“敲锁”还是解决了问题，决定用小本本记录下来。

一、问题描述：

小二，“上图”。

想把“学习中”标签显示在scrollview控件的右上角。scrollview中的子元素body布局为水平线性布局。通过flex:1;设置右端显示区域为淡蓝色显示区域。将删除图标css类中添加margin-top: 50%;使删除图标垂直居中显示，就成了如图所示。
“学习中”标签无法设置到右上角，通过添加绝对margin-left:80rpx;后如图所示。

很遗憾超过了想要达到的位置。细细一想，即使在这里通过margin-left设置好位置后。在不同的手机上显示时，手机的宽度不尽相同。父级元素有通过%设置宽度的，写上绝对左边距后，后果不敢预料。

二、解决思路：

position:absolute;z-index:1;显示后的元素会脱离父级元素。和父级元素同级显示。通过right控制右边距，设置与父级元素同右边距，以达到显示效果。

[wx·part]微信小程序通过positon:absolute布局解决元素浮动显示后，如何设置显示位置问题相关推荐

解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
微信小程序开发报错及解决记录
目录 1. 微信小程序Api使用 1.1.路由跳转方式wx.redirectTo()和wx.navigateTo()有时会失效 1.2.预览图片wx.previewImage() 点击始终显示第一张图 ...
微信小程序知道商家的具体地址但不知道经纬度如何通过自身的位置再通过距离的远近接单？
认定了就要好好的珍惜对待,人生不容辜负,你必须要更加努力 .加油骚年. 微信小程序知道商家的具体地址但不知道经纬度如何通过自身的位置再通过距离的远近接单? 话不多说按步骤来就完事了第一步 ...
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...
微信小程序 View：flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
Taro开发微信小程序遇到的问题和解决方法
Taro开发微信小程序遇到的问题和解决方法参考文章: (1)Taro开发微信小程序遇到的问题和解决方法 (2)https://www.cnblogs.com/wuliujun521/p/114753 ...
零基础也能学会的微信小程序制作横向滚动布局
零基础也能学会的微信小程序制作横向滚动布局准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 动手做起来吧~ index.wxml 最终效果: <! ...
微信小程序view水平垂直居中完美解决
微信小程序view水平垂直居中完美解决 .view_box{display: flex;align-items: center;justify-content: center;width: 100%; ...

[wx·part]微信小程序通过positon:absolute布局解决元素浮动显示后，如何设置显示位置问题

前言：

一、问题描述：

二、解决思路：

[wx·part]微信小程序通过positon:absolute布局解决元素浮动显示后，如何设置显示位置问题相关推荐

最新文章

热门文章