附加的div没有放置正确的位置

Question

http://jsfiddle.net/epbuw2sm/2/

这是我的代码

<div id="container" style="position:relative;margin-top:50px;margin-left:50px;width:200px;height:300px;border: 2px solid red;">
      <div id="container1" style="position:relative;margin-top:30px;margin-left:30px;width:50px;height:50px;border: 2px solid #a1a1a1;">           
      </div>
    <div id="container2" style="position:relative;margin-top:30px;margin-left:30px;width:50px;height:50px;border: 2px solid green;">
    </div> 
</div>  

container2位置与container1位置相同，但container2附加在container1下面，我的意思是它显示在container1下面。如何解决这个问题。我需要追加相同的位置。没有改变立场。解决问题

Answer 1

这是代码，试试这个

<div id="container" style="position:relative;margin-top:50px;margin-left:50px;width:200px;height:300px;border: 2px solid red;">
      <div id="container1" style="float:left;margin-top:30px;margin-left:30px;width:50px;height:50px;border: 2px solid #a1a1a1;">           
      </div>
    <div id="container2" style="position:relative;margin-top:30px;margin-left:30px;width:50px;height:50px;border: 2px solid green;">
    </div> 
</div>   

Answer 2

相对于家长

对所有子position:absolute使用containers，并将position:relative保留为父级。

更新了小提琴：http://jsfiddle.net/epbuw2sm/3/

相对于文档

• 对两个孩子position:absolute使用containers。
• 删除父级的position:relative。
• 使用top和left代替margin-top和margin-left

更新了小提琴：http://jsfiddle.net/epbuw2sm/7/

如果父母必须是亲属，请考虑删除父母以外的子女。

如果您想控制最顶层使用z-index。

Answer 3

向float1和container2 div添加float。

[js小提琴] [1]

[1]: http://jsfiddle.net/epbuw2sm/6/