添加div时，html的内容会下降

Question

请查看图片：

检查黑圈。

此黑色圆圈包含位于每个广告系列的服务水平的图表，但是当我添加红色区域时，图表会在您看到时下拉。

你可以帮我吗？

我想将图表保持在正确的位置，并将红色区域放在上面。

这是代码：

 <div style="width: 45%; float: left; margin-left:5%">
                    <div class="chartHeaderClass" style="width: 100%;">
                        <h3>Service Level Per Campaign</h3>
                        <%-- Start Dropdown Code --%>
                        <a id="DropdownSeviceLink" href="#">+</a>
                        <div ID="campaignDiv" runat="server" >
                            <ul>
                            </ul>
                        </div>
                        <script type="text/javascript" src="Scripts/DropdownCheckbox.js"></script>
                        <%-- End Dropdown Code --%>
                    </div>

红色区域是ID campaignDiv的div我动态填充它。

campaignDiv的css是：

#DropdownSeviceLink {
    float:right;
    margin-right:10px;
}
a#DropdownServiceLink:visited {
    color:inherit;
}
#campaignDiv {
    background-color:red;
    width:200px;
    height:200px;
    float:right;
    position:relative;
}

整个代码

http://jsfiddle.net/jdhMs/

Answer 1

如果红色框必须在上面，那么最简单的方法是更改​​位置：相对于绝对值。 （父div，chartHeaderClass，应该有一个位置：relative）。

#campaignDiv {
  background-color:red;
  width:200px;
  height:200px;
  position:absolute;
  top: 0;
  right: 0;
}