有人可以告诉我如何才能使这两个div重叠而不是并排
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>
答案 0 :(得分:2)
如果您的意思是重叠,那么您需要设置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 */ }
答案 1 :(得分:0)
您可以使用position: absolute;
答案 2 :(得分:0)
.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