为什么元素D没有放下元素B和C

Question

这是我呈现的页面：

以下是源代码：

<div id="a">
</div>
</div id="b">
</div>
<div id="c">
</div>
<div id="d">about
</div>

也是CSS文件：

#a{
  background-repeat:no-repeat;
  background-position:center; 
  height:120px;
  background-color:green;
}   

#b{
  background-image:url('resources/weneedu.png');
  background-repeat:no-repeat;
  background-position:center; 
  width:40%; 
  height:340px;
  position:absolute;
  left:10% 
}   

#c{
  background-image:url('resources/yunoguy.png');
  background-repeat:no-repeat;
  background-position:center; 
  width:40%; 
  height:340px;
  position:absolute;
  left:52%;
}  

为什么元素D在元素A下移动，并留到元素B？像这样，有趣的是，它移动到之前，C和B：

另外，如果我想做这样的事情：如何实现它？谢谢。

Answer 1

position: absolute从自然流中移除元素。请尝试使用position: relative，然后查看是否可以将您带到您想要的位置。

为什么不以同样的方式定位#d？