对于子div，如果我提供的位置是固定的，则它相对于父div定位。根据我的理解，固定定位元素从流中取出，使其相对于视口。
我的问题是为什么孩子div会进入主div？
以下是我的代码。
#main {
margin-left : 30px;
background-color : red;
width : 100px;
height : 100px
}
#child {
position : fixed;
background-color : yellow;
width : 50px;
height : 50px;
}<div id="main">
<div id="child">Child Div</div>
</div>
答案 0 :(得分：2)
不是。它只是看起来那样。将顶部属性设置为0，您将看到它粘在视口的顶部。你只是没有把它移到任何地方。
#main {
margin-left : 30px;
background-color : red;
width : 100px;
height : 100px
}
#child {
position : fixed;
background-color : yellow;
width : 50px;
height : 50px;
top:0;
}<div id="main">
<div id="child">Child Div</div>
</div>
另一种看待它实际修复的方法是在它之后添加足够的内容，这样你就可以向下滚动并看到它确实是固定的。
#main {
margin-left: 30px;
background-color: red;
width: 100px;
height: 100px
}
#child {
position: fixed;
background-color: yellow;
width: 50px;
height: 50px;
}<div id="main">
<div id="child">Child Div</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>