将父元素的定位方式从绝对改为相对，红色正方形微调

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /*完善下列代码*/
    .per{
     width: 300px;
     height: 300px;
     background: red;
     margin-left:200px;
     margin-top: 200px;
     position:relative;
   }
 
   .son{
     width: 100px;
     height: 100px;
     background: blue;
     position:absolute;
     top:100px;
     left:100px;
 
   }
  </style>
</head>
<body>
  <div class="per">
    <div class="son"></div>
  </div>
</body>
</html>

如上代码，将per的position属性由relative改为absolute后，红色正方形会微微向下移动，请问是什么原因？

Homo_sapiensQ 2020-09-16

源自：CSS定位 2-4 编程练习

收起

2回答

好帮手慕阿满 2020-09-16 18:49:59

同学你好，将绝对定位和相对定位的效果截图做比较，如：

可以发现绝对定位时，有8px的margin-top和margin-left。

这是因为绝对定位时，是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。

这里红色方框per外没有定位元素，所以per是相对于body进行定位的，而body有默认的8px外边距，造成绝对定位时，有8px的margin-top和margin-left。如果给body设置了margin:0;，则相对定位和绝对定位效果一致。

祝：学习愉快~

收起回答

qq_慕神0589333 #1

这里的实线黑色边框部分不是per吗,怎么是红色边框呢

2021-03-15 11:18:45
好帮手慕阿满回复 qq_慕神0589333 #2

同学你好，不太明白同学的问题。per的背景设置为红色，并且没有设置边框，图中所示的红色框是截图时增加的，提示重点关注区域。
如果同学有什么问题，可以新开一个问答，详细描述一下。
祝学习愉快~

2021-03-15 14:33:51