html元素的排列

我正在一個頁面中包含兩個與html相互衝突的diffirent插件。一個插件arange div絕對。另一個插件會自定義下拉列表。問題是，如果我把選擇框放在一個格子裏。它下面還有另一個格子。頂部div內的選擇框會在底部div後面..我希望這個div能夠在另一個塊的頂部。我不想以相反的順序從下到上重新排列所有z索引。html元素的排列

我一直在尋找一個解決這個問題的（css）。因爲系統在很大程度上取決於兩個插件（在每個頁面上實施）。所以我不能只拿走其中的一個插件..我希望任何人都可以給我一個解決這個問題的方法

這是一個小問題例如我的意思：

#div1 { 
 
    width:500px; 
 
    border:1px solid black: 
 
    height:150px; 
 
    max-height:150px; 
 
    background-color:green; 
 
    left: 50px; 
 
    top:50px; 
 
    position:absolute; 
 
    overflow:visible; 
 
    display:block; 
 
    z-index:1; 
 
    color:white; 
 
} 
 

 
#div2 { 
 
    position: relative; 
 
    left:200px; 
 
    width:100px; 
 
    background-color:blue; 
 
    border: 1px solid black; 
 
    height:500px; 
 
    z-index:999; 
 
    color:white; 
 
} 
 

 
#div3 { 
 
    position:absolute; 
 
    top:250px; 
 
    width:500px; 
 
    left:50px; 
 
    background-color:red; 
 
    height:200px; 
 
    z-index:3; 
 
    color:white; 
 
}

<div id="div1" > 
 
Top div 
 
    <div id="div2">This one should be on top</div> 
 
</div> 
 
<div id="div3"> 
 
\t Bottom div 
 
</div>

來源

2015-02-10 Mark Smit

如果你只是從#div3刪除的z-index？當我這樣做時，藍色#div2出現在紅色的上面。

這是你在找什麼？

來源

2015-02-10 16:16:34 Raffi

這是我想要的結果，但這不是我可以這樣做的方式，因爲如果我從div1中刪除z-index，div2會再次落後於div3 – 2015-02-11 07:45:27

html元素的排列

回答

相關問題