老师，看一下我写的符合题目要求吗

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

/*完善下列代码*/

.per{

width: 300px;

height: 300px;

background: red;

margin-left:200px;

margin-top: 200px;

position:absolute;

}

.son{

width: 100px;

height: 100px;

background: blue;

position:relative;

left:50%;

margin-left:-50px;

top:50%;

margin-top:-50px;

}

</style>

</head>

<body>

</div>

</body>

</html>

源自：浮动与定位 3-7 编程练习

收起

1回答

好帮手慕慕子 2021-09-02 16:16:13

同学你好，效果实现了，但是与题目要求不符，可以结合下图标注理解：

建议修改：父元素设置相对定位，子元素设置绝对定位。示例：

祝学习愉快~

提问者 dy12369 #1

老师，如果题目没有要求，我们在日常使用的时候是在父级元素设置绝对定位还是相对定位？两者的区别在哪？

2021-09-02 16:20:23
好帮手慕慕子回复提问者 dy12369 #2

同学你好，对于你的问题解答如下：
1、日常开发中，一般更多的是给父元素设置相对定位。不过还是要结合实际要实现的效果，具体情况具体分析，灵活应用所学知识就好。
2、父元素不管设置绝对定位还是相对定位，设置了绝对定位的子元素都会参考它的父元素进行定位。两者的区别就是：
（1）父元素设置相对定位。此时，父元素没有脱离文档流
（2）父元素设置绝对定位，此时，父元素脱离了文档流
祝学习愉快~

2021-09-02 16:33:28