position:relative配合top:10%无效是什么原因?

Question

.btn-wrap{width: 90%;  margin: 0 auto;  position: relative;top:50%; }
a.btn-rgl{display:block;background:#FD5F56;height:40px;color:#fff;}
<div class="btn-wrap">
<a href="#" class="btn-rgl">我怎么没动？</a>
</div>

就是上面简单的代码，在线预览http://jsbin.com/dipipisuso/edit?html,output
我设置了position: relative;top:50%;但是为什么这个区域没向下移动呢？竟然紧贴顶部！！？？

Answer 1

父级元素没有高度，百分比无论多大浏览器都解析不出具体数值。
你可以测试：
1 50%改成50px，效果就出现了
2 给父级加上高度，例如：html,body{height:100%;}

Answer 2

你用绝对定位试试，position:absolute