请问relative设置偏移为百分比的效果
请问我为relative的元素设置了top和left百分比,
left起作用, top不起作用, 这是怎么回事呢?
<style type="text/css">
.parent{
width: 300px;
height: 300px;
border: 1px solid red;
background: gray;
position: relative;
top:50%;
left:50%;
}
.block{
height: 100px;
width: 100px;
border: 1px solid red;
background: blue;
position: absolute;
top:50%;
left:50%;
margin-left: -50px;
margin-top: -50px;
}
</style><body> <div class="parent"> <div class="block"></div> </div> </body> </html>
6
收起
正在回答
1回答
你好，该问题，在你的另一个问答 http://class.imooc.com/course/qadetail/36411 中已经解释了哦，
1、百分比这个值是以父级为参考的，就是说，是父级的百分之多少。
2、这里parent的父级是body,而浏览器中，body是默认高度，并不是浏览器的可视区域高度。但是body的默认宽度是浏览器的可视区域宽度。所以，body的高度是0px，但是宽度是浏览器的宽度。
3、所以这里top设置百分比没有生效，但是left的有效。
祝学习愉快~
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星