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

问题描述

问 题

.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%;但是为什么这个区域没向下移动呢？竟然紧贴顶部！！？？

解决方案

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

这篇关于css - position:relative配合top:10%无效是什么原因?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！