微信端页面使用-webkit-box和绝对定位时，元素上移的问题

Drummor 发布于2019-08-05 17:49 / 1722人阅读

摘要：它的使用方法是以上布局会使得三个元素平分元素的宽度。但是，在微信端页面上，元素只是在的水平方向居中，垂直方向上不居中，而是超出元素，在上方。给元素设置高度后，的绝对定位就能通过的高度来计算位置。

-webkit-box 的用法

通常，在移动端要实现水平方向平分宽度的布局，会使用 -webkit-box 来布局。
它的使用方法是：

.parent {
    display: -webkit-box;
}
.child {
    -webkit-box-flex: 1;
    width: 1px;
}

以上布局会使得三个.child元素平分.parent元素的宽度。

在.child元素内添加绝对定位的子元素

.parent {
    display: -webkit-box;
    margin-top: 100px;
    background-color: #ffffd;
}
.child {
    position: relative;
    -webkit-box-flex: 1;
    width: 1px;
}
.ele {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    background-color: blue;
}

这种定位在chrome浏览器上是显示正常的，ele元素是在child元素的正中间。
但是，在微信端页面上，ele元素只是在child的水平方向居中，垂直方向上不居中，而是超出child元素，在child上方。

显示的效果是：

解决方法

要解决这个问题，只需要在child元素上添加一个固定的高度即可。代码如下：

.child {
    position: relative;
    -webkit-box-flex: 1;
    width: 1px;
    height: 500px;
}

显示的效果是：

原因分析

在浏览器中，绝对定位是脱离文档流的，所以ele元素不能撑起child元素的高度，导致child的高度是0，所以ele会顶到浏览器顶部。
给child元素设置高度后，ele的绝对定位就能通过child的高度来计算位置。

（完）

服务器托管混合云中的绝对定位 js表单元素上移微信端 webrtc java 微信端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/59974.html

微信小程序学习简介

摘要：具体调用参考接口请求封装函数一般在中实现微信自带的网络请求方法调用接口请求函数如在中首先需要获取应用实例调用数据请求在函数中声明的一个全局变量，接下来使用点语法直接调用请求下来的值就可以了。如何向微信小程序导入DEMO源码：参考方法参考学习小程序官方文档小程序官方文档小程序目录简介 app.json ：设置一些工程全局的量.js : 写一些函数逻辑.wxml: 调用.js中写...

BetaRabbit 2019-08-30 14:07 评论0 收藏0
微信小程序学习简介

摘要：具体调用参考接口请求封装函数一般在中实现微信自带的网络请求方法调用接口请求函数如在中首先需要获取应用实例调用数据请求在函数中声明的一个全局变量，接下来使用点语法直接调用请求下来的值就可以了。如何向微信小程序导入DEMO源码：参考方法参考学习小程序官方文档小程序官方文档小程序目录简介 app.json ：设置一些工程全局的量.js : 写一些函数逻辑.wxml: 调用.js中写...

Drummor 2019-08-22 15:22 评论0 收藏0
微信小程序学习简介

摘要：具体调用参考接口请求封装函数一般在中实现微信自带的网络请求方法调用接口请求函数如在中首先需要获取应用实例调用数据请求在函数中声明的一个全局变量，接下来使用点语法直接调用请求下来的值就可以了。如何向微信小程序导入DEMO源码：参考方法参考学习小程序官方文档小程序官方文档小程序目录简介 app.json ：设置一些工程全局的量.js : 写一些函数逻辑.wxml: 调用.js中写...

LMou 2019-08-01 18:41 评论0 收藏0
手机html页面的垂直布局的基本框架

摘要：第一，弹性布局有一新一旧两个版本，当然想用新版本，可是版的微信不支持，好在和主流的浏览器也都支持老版本，所以就先用老版本吧只是做了简单的兼容测试。手机页面的一种典型布局方式为：头（header）、主体（main）和底（footer），头和底放一些常用的操作，主体部分显示内容，如下图：showImg(https://segmentfault.com/img/bVstLo);要达到的效果...

lavor 2019-08-30 12:45 评论0 收藏0
手机html页面的垂直布局的基本框架

摘要：第一，弹性布局有一新一旧两个版本，当然想用新版本，可是版的微信不支持，好在和主流的浏览器也都支持老版本，所以就先用老版本吧只是做了简单的兼容测试。手机页面的一种典型布局方式为：头（header）、主体（main）和底（footer），头和底放一些常用的操作，主体部分显示内容，如下图：showImg(https://segmentfault.com/img/bVstLo);要达到的效果...

CatalpaFlat 2019-08-01 15:03 评论0 收藏0