老师，遇见了一个这种问题
来源：4-2 侧边栏导航跟随案例
LongFace
2020-03-15 21:32:01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
.out{
width:100px;
height:100px;
background-color:black;
position: relative;
}
.test{
width: 20px;
height: 20px;
background-color:yellow;
position: absolute;
left: 20px;
top: 0px;
}
</style>
</head>
<body>
<div class="out">
<div class="test">
<div class="test" style="background-color:red;">
</div>
</div>
</div>
</body>
</html>老师，这里有个问题，如果我这样设置的话，第一个test容器是相对于out容器来进行绝对定位的，那第二个容器是相对于谁来进行绝对定位的呢，当我把left偏移量设置成0，这两个就会重合，当设置成20px就会并排显示，这是什么原因呢
写回答
1回答
-
同学你好，第二个test容器是相对于父级test(第一个test容器)定位的。如果left值设置为20px，那么第一个test容器距离父级(类名为out的元素)左侧20px，第二个test容器距离第一个test容器左侧20px，如果设置为0，那么第一个test容器距离父级(类名为out的元素)左侧0px，第二个test容器距离第一个test容器0px，就发生了重合。
一般情况下，子级与父级的类名不会设置成一样。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0h020-03-16
相似问题