HTML DIV上述內部DIV

Question

我試圖建立一個可擴展的幻燈片我的一個項目，我被困造型我的div爲了出現我預期DIV。

我有一個div #container的至極將舉行另兩個div：一個#shadow DIV和#bgimg股利。

<div class="container" id="container"> 
    <div class="shadow"></div> 
    <div class="bgimg"></div> 
</div>​ 

.container { 
    width: 81px; 
    height: 500px; 
    background-color: red; 
    overflow: hidden; 
} 

.bgimg { 
    width: 300px; 
    height: 100%; 
    background: url("http://www.jbraccini.com/files/bg.jpg") no-repeat left top; 
} 

.shadow { 
    width: 100%; 
    height: 100%; 
    background: url("http://www.jbraccini.com/files/container-shadow.png") no-repeat right top; 
    position: relative; 
} 

• 的#bgimg DIV是爲了保持實際圖像幻燈片就會呈現。

• 的#container的DIV溢出屬性已經設置爲隱藏，並且也是一個寬度和高度;後來，通過javascript，我計劃檢測鼠標懸停（mouseover）和鼠標懸停事件，以擴展它並以更大的視角顯示圖像。

• 的#shadow DIV計劃於上述#bgimg（在同一個地方，但是具有較高的z索引），並且將具有在順序右頂部對齊透明PNG（圖像）作爲背景圖像來模擬一個#container的內部陰影，所以幻燈片似乎會（以可視的方式）以某種方式物理地嵌入到頁面的主體中。

最終結果將是改變#container的寬度，這將改變#shadow寬度，以及因爲它的寬度被設定爲100％，那麼，它會positionate陰影到右頂部，而#bgimg正在被發現。

我明顯沒有達到這樣的結果：D #shadow div保持在#bgimg之上，將它推到底部。我試圖設置#shadow position：absolute;但我很想不必改變＃陰影屬性的代碼，我想找到一個CSS解決方案，如果這是可能的。

爲了理解的目的我已經在這裏創造實例的一些劍： http://jsfiddle.net/jbraccini/jyuKL/8/

而最終的結果應該是這樣的： http://www.jbraccini.com/files/final.jpg

無論如何，我希望有人能微啓我。

此致敬禮！

Ĵ

Answer 1

試試這個：

.container { 
    width: 300px; 
    height: 500px; 
    background-color: red; 
    overflow: hidden; 
    position:relative; 
} 

.bgimg { 
    width: 300px; 
    height: 100%; 
    background: url("http://www.jbraccini.com/files/bg.jpg") no-repeat left top; 
} 

.shadow { 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    background: url("http://www.jbraccini.com/files/container-shadow.png") no-repeat right top; 
    position: absolute; 
    z-index:2; 
}