微信端页面使用-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, 元素
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!