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

Question

这是我的代码

<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

相对于Parent

在 child containers 上使用 position:absolute 并在 parent.

上保持 position:relative

已更新 fiddle：http://jsfiddle.net/epbuw2sm/3/

相对于文档

对childcontainers使用position:absolute。
在 parent 上删除position:relative。
使用top和left代替margin-top和margin-left

已更新 fiddle：http://jsfiddle.net/epbuw2sm/7/

如果parent必须是相对的，考虑去掉parent外的children。

如果您想控制哪个在最前面，请使用 z-index。

Answer 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="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 3

向 container1 和 container2 div 添加左浮动。

[js fiddle][1]

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

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

appended div was not placing a correct location

javascript

css

css-position