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

来源：2-5 position-relative

NeilSK

2018-01-17 14:44:13

请问我为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>

写回答

4回答

好帮手慕糖

2018-01-17

已采纳

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

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

html,body{
    height:100%;
}

祝学习愉快~

heilSK

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

h018-01-17

共2条回复

好帮手慕糖

2018-01-17

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

祝学习愉快~

heilSK

h 理解了, 谢谢您!

h018-01-17

共1条回复

好帮手慕糖

2018-01-17

你好，因为absolute是相对于浏览器窗口为参考的呀。absolute会向父级找参考，如果父级没有定位，会一直往外找，这里是由于都没有，那就相对于浏览器窗口来定位了。

祝学习愉快~

heilSK

h 那relative不会一直向外找, 因为他只是以自身原来文档流位置作为参照是吗? 但是为什么relative的left还是有用...T.T

h018-01-17