微信端頁面使用-webkit-box和絕對定位時，元素上移的問題

-webkit-box 的用法

一般，在移動端要實現水平方向平分寬度的佈局，會使用 -webkit-box 來佈局。
它的使用方法是：

<div class='parent'>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
</div>

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

以上佈局會使得三個.child元素平分.parent元素的寬度。

在.child元素內添加絕對定位的子元素

<div class='parent'>
    <div class='child'>
        <div class='ele'></div>
    </div>
    <div class='child'>
        <div class='ele'></div>
    </div>
    <div class='child'>
        <div class='ele'></div>
    </div>
</div>

.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的高度來計算位置。

（完）