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

-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: # ddd;}.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的高度来计算位置。

（完）

关键字：html5, css3, child, 元素

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！