【问题标题】：make two divs float right and Overlap?让两个 div 向右浮动并重叠？
【发布时间】：2012-06-01 02:51:03
【问题描述】：

谁能告诉我如何让这两个 div 重叠而不是并排

hc_menu & #hc_show_hide

jsfiddle 这是代码： css：

   .chart_scroll{  height: 100%;}
    #hc_hover{height:100%;width: 25%; float: right;}
    #hc_menu{height:400px ;background-color: Black;opacity:0.4;margin:50px 0px 50px 20px;width:125px ; float:right;}
    #hc_show_hide{height:500px ; width: 15% ;float:right ; background:red;}

html：

 <div class="chart_scroll" runat="server" id="pnlCharts">
              <div id="hc_hover" >
              <div id="hc_show_hide"></div>
                <div id="hc_menu">
                    
                </div>
              </div>
           </div>

【问题讨论】：

你说的interact是什么意思？
重叠？所以他们在彼此之上？
谢谢@MetalFrog 原谅我的英语不好

标签： html dom css

【解决方案1】：

如果您的意思是重叠，那么您需要设置 position:absolute 并调整您的 z-index 以确定哪个在顶部。

您的代码有一些更改，因此这里是更新后的 CSS，以及a new fiddle：

 .chart_scroll{  height: 100%;} 
#hc_hover{height:100%;width: 25%; float: right; position:relative; /* Keeps the children inside of its boundry */}
        #hc_menu{height:400px ;background-color: Black;opacity:0.4;margin:50px 0px 50px 20px;width:125px ; float:right; position:absolute;  right:0; /* lets it occupy the same space, aligned to the right */  z-index:50 /* puts this one on top */ }
        #hc_show_hide{height:500px ; width: 15% ;float:right ; background:red;  position:absolute; right:0; /* lets it occupy the same space, aligned to the right */ }

【讨论】：

【解决方案2】：

您可以使用position: absolute; 让它们重叠

【讨论】：

【解决方案3】：

.chart_scroll{ width: 100%;}
#hc_menu, #hc_show_hide{width: 100px; height: 100px; float: right;  }
#hc_menu{background: blue; z-index: 1; position: relative; left: 10px; top: 10px;}
#hc_show_hide{background:red;}


<div class="chart_scroll" runat="server" id="pnlCharts">
    <div id="hc_hover" >
            <div id="hc_show_hide"></div>
            <div id="hc_menu"></div>
    </div>
</div>

使用上面的代码，蓝色将始终被红色划分为朋友区。哈哈@mattytomo

【讨论】：