顯示一個div高於另一個 - css

Question

我有一個頁面7個div如下;

<div id="container"> 
    <div id="head"></div> 
    <div id="A"> 
     <div id="A1">A1</div> 
     <div id="A2"></div> 
    </div> 
    <div id="B"></div> 
    <div id="foot"></div> 
</div> 

樣式如下所示;

html, body { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
#A, #B, #foot { 
    position: absolute; 
} 
#head{ 
    background: #FF9900; 
    width: 100%; 
    height: 35px; 
} 
#A { 
    top: 35px; 
    width: 200px; 
    bottom: 35px; 
    background-color: #999999; 
} 
#A1{ 
    height: 35px; 
    width: 35px; 
    margin-left: 200px; 
    background-color: #CC0066; 
} 
#B { 
    top: 35px; 
    left: 200px; 
    right: 0; 
    bottom: 35px; 
    background-color: #99CC00; 
} 
#foot{ 
    background: #0066CC; 
    width: 100%; 
    height: 35px; 
    bottom: 0; 
} 

但我的div A1沒有得到顯示。一個工作小提琴是here。我想在div B以上顯示div A1。我怎樣才能解決這個問題？？

在此先感謝... :)

blasteralfred

Answer 1

你的＃A1 div正在被你覆蓋#B div。添加z-index：100; （或其他一些z-index數字）到您的#A div CSS。在這裏看到示例http://jsfiddle.net/rGGEK/22/。

Answer 2

這是#A1 margin-left是什麼原因導致的麻煩。

#A的寬度爲200px，並且#A1.margin-left設置爲200px。

Answer 3

首先，你忘了A1的風格在你的小提琴:) 其次，父容器A是200px寬，所以你的A1啓動就在它的右邊界之外。

Answer 4

這是因爲餘裕。如果你將它降低到10像素，你可以看到它。

Answer 5

刪除margin-left：200px;從你的風格A1

#A1 { 
    height: 35px; 
    width: 35px; 
    background-color: cyan; 
}