麻烦看下对不对，顺便想问一下，为什么给子元素设置绝对定位前要给父元素设置相对定位

<html>

<head>

<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;

left:100px;

top:100px;

}

</style>

</head>

<body>

</div>

</body>

</html>

<br>

M灬spirit 2020-01-19

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

收起

2回答

好帮手慕小班 2020-04-28 11:03:56

同学你好，1、只有父类有定位元素才可以按照父类定位，可以是相对定位，也可以是绝对定位。

2、同学的说法是正确的，如果父类没有定位元素但是父类的父类有定位元素，它会相对于有定位元素的父类来定位。

同学可以参考如下代码，运行后来理解：

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /*完善下列代码*/
    .father{
        width: 1000px;
        height: 1000px;    
        background: #f60;
        position: absolute; 
        /* position: relative;  */
    }
 
    .hello{
        width: 500px;
        height: 500px;
        background-color: red;
        /* position: absolute;  */
        /* position: relative;  */
    }
  
   .hello2{
       width: 200px;
       height: 200px;
       background-color: blue; 
       color: #fff;
       position: absolute;
       top: 100px;
     }
 
  
  </style>
</head>
<body>
 <div class="father">
        <div class="hello">
                <div class="hello2">你好，慕课网！！</div>
        </div>        
 </div>
     
</body>
</html>

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

收起回答

好帮手慕小班 2020-01-19 15:32:09

同学的代码完成的非常好，要给父元素设置相对定位的原因：

当父元素没有设置定位时，子元素设置了绝对定位后会向上找定位元素，如果没有，则会相对于html定位，或者说整个网页，如果父元素加了定位，则子元素相对于父元素定位。所以需要给父元素添加定位。

如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~

收起回答

源治泷谷 #1

只有父类有定位元素才可以按照父类定位，否则按照网页定位？那父类随便设相对定位或者绝对定位都无所谓吗？如果父类没有定位元素但是父类的父类有是不是就按第一个有定位元素的上级定位？

2020-04-28 00:27:54
好帮手慕小班回复源治泷谷 #2

同学你好，老师在上面回答中回复了同学这个问题，同学可以来查看一下。继续加油祝：学习愉快~

2020-04-28 11:04:51
慕函数1524670 回复源治泷谷 #3

是的，一直向上找，直到某个祖先元素有absolute/fixed/relative三个属性的其中之一为止。比如在你的代码中，son元素设置了absolute属性，所以就要看per元素有没有上面提到的三个定位属性之一。如果没有就看body,body也没有就再向上找到HTML，还没有就得参照最上层的初始包含块来定位了。

2020-05-05 23:53:16