第二個div是顯示underneeth相對位置div

Question

我想要底部包裝 div顯示在頂部包裝 div（如正常順序）。
現在它顯示出來underneeth的頂級包裝

什麼我錯在這裏做什麼？

http://jsfiddle.net/uqtZ5/

HTML

<div id='top-wrapper'> 
    <a href='#'>Title to overlay</a> 
    <img src='image.jpg' /> 
</div> 
<div id='bottom-wrapper'> 
    <a href='#'><h3>Header</h3></a> 
    <p>Lorum ipsum</p> 
</div> 

CSS

#top-wrapper { 
    position:relative; 
} 

#top-wrapper a, 
#top-wrapper img { 
    position: absolute; 
} 

#top-wrapper a { 
    background-color:#FF0000; 
    z-index: 10; 
} 

Answer 1

您設置和IMG在頂部封裝的位置是絕對的。

在這種情況下，位置在相對定位的DIV中是絕對的，但是您沒有設置頂層包裝的高度，因此絕對定位的內容會超過div底層包裝。嘗試指定頂層包裝高度以匹配img高度並查看是否可以解決您的問題。

那麼試試這個：

#top-wrapper { 
    position:relative; 
    height: 216px; 
}