请问relative设置偏移为百分比的效果

请问我为relative的元素设置了top和left百分比,

left起作用, top不起作用, 这是怎么回事呢?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<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>

NeilSK 2018-01-17

源自：CSS定位（position） 2-5 position-relative

收起

4回答

好帮手慕糖回答被采纳获得+3积分 2018-01-17 15:12:18

你好，百分比这个值是以父级为参考的，就是说，是父级的百分之多少，但是这里parent的父级是body,而浏览器中，body是默认高度，并不是浏览器的可视区域高度。但是body的默认宽度是浏览器的可视区域宽度。所以，body的高度是0px，但是宽度是浏览器的宽度。

所以这里top设置百分比没有生效，但是left有效，建议：可给body设置下高度。例：可参考如下，设置百分比，也可以设置具体的高度。

html,body{
    height:100%;
}

祝学习愉快~

收起回答

NeilSK 提问者 #1

非常感谢！

2018-01-17 15:14:18
NeilSK 提问者 #2

还有一个问题 position为absolute, 设置top:50%就起作用, 这是为什么呢?

2018-01-17 15:15:36

好帮手慕糖 2018-01-17 15:48:27

你好，是的，因为relative是以自身为参照。另：为什么left还有用，刚才已经有提到这个问题了哦，,而浏览器中，body是默认高度，并不是浏览器的可视区域高度。但是body的默认宽度是浏览器的可视区域宽度。所以，body的高度是0px，但是宽度是浏览器的宽度。宽度是浏览器的宽度，所以百分比生效，那么left就有效。也不是说top不能用，是可以使用的，只是百分比不行，你可以设置个固定数值还是可以的。

祝学习愉快~

收起回答