可以有一個人請告訴我，我怎樣才能使這個兩個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>

來源

2012-05-31 Mina Gabriel

你是什麼意思*互動*？ – mattytommo

重疊？所以他們在彼此之上？ – MetalFrog

謝謝@MetalFrog原諒我的英語不好 –

如果您的意思是重疊，那麼您需要設置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 */ }

來源

2012-05-31 18:42:07 MetalFrog

謝謝工作正常 –

你可以讓他們通過使用position: absolute;

來源

2012-05-31 18:43:23 user1337

.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

來源

2012-05-31 18:51:03

使兩個浮動右和重疊？

hc_menu & #hc_show_hide

回答

相關問題