有趣的bug

背景：

　　这是一个很传统的上中下布局页面，中间需要过长时可滚动。中间的数据带有input复选框。

Bug描述：

　　我最开始的时候，给的数据是过长的，所以可滚动，并且一切都很正常。点击input选中也很正常——但是，除了点击最后一个！！！！Bug发生了，所有的数据都往上跑了一段距离，但所有的元素高度都没有！（是不是很神奇~！）

（此处应有图片……）

 

场景：

　　页面布局很简单：

　　除了最外层的加了定位，里面的都没加定位。中间部分滚动靠max-height来限定高度。

<div style="position:relative">
    <div>上</div>
    <div>中</div>
    <div>下</div>
</div>

　　当不点击中间内容的最后一个input，显示完全没有问题。当点击时就会出现上面说的bug。并且页面所有的元素高度都是没有变化的。而且我尝试减少数据，发现减少一个，下面的白色就越少（也就是元素上移的高度越少），知道正常显示。

解决方法：　　

　　居然是添加position属性，且属性值居然是relative！！！不知道有没有小伙伴猜到呢~~（反正我是猜到的~）

<div style="position:relative">
    <div>上</div>
    <div style="position:relative">中</div>
    <div>下</div>
</div>

很神奇有没有！！！