爲什麼位置：如我所料與浮動

Question

這是example相對不工作，

注意.mappanel，它需要覆蓋的所有瀏覽器的寬度，而我想在合適的.textview DIV顯示。

當我刪除位置：相對的，它的工作（雖然我不能刪除position:relative兩個

其實，我想要的是.textview走在我的例子固定寬度（380），和。該.mappanel走左邊

並在某些時候，在.textview可以崩潰，那麼.mappanel採取一切寬度

---

更新：

有人建議我使用z-index，但我不能。

因爲如果我使用z-index和.textview出現。但.mappanel也採取了父母的整個寬度，而我只是想它需要lefe空間。

這就是說，如果父元素的兩個元素的寬度爲600px，然後.mappanel將有（600-380）px;

Answer 1

這是一個z-index問題。您的.textview面板出現在您的.mappanel下方。這是因爲你已經爲他們定義了position，這會給他們一個默認的z-index。並且因爲.mappanel位於代碼中的.textview之後，所以會出現在上面。

試試這個：

CSS

.textview { 
    width: 380px; 
    position:relative; 
    z-index: 1; 
    top: 0px; 
    float:right; 
    height: 535px; 
    background: #cc0000; 
} 
.mappanel { 
    position:relative; 
    z-index: 0; 
    background: #0000cc; 
    height: 535px; 
    margin-right: 380px; 
} 

Demo

更新1

要解決非流通面板的寬度不會去下浮動面板，您可以在右側添加邊距：

margin-right: 380px; 

我已經更新了上面的演示，如果您希望看到它正在運行。