2013-06-19 45 views
0

好吧,所以我有這些div被稱爲「latestWorkTitle」,它們是絕對定位的,並放置在相應圖像的頂部以顯示其標題。絕對定位的div將不會保留在原地

但是,我無法正確地工作。標題不顯示在相應的圖像上,當我調整瀏覽器窗口大小時,所有內容都會發生變化等等。

我試着用我的代碼的一部分創建這個jsbin http://jsbin.com/uhoxef/1來說明它應該是什麼樣子以及出了什麼問題。即使所有的標題都在代碼中相互重疊,而它們應該位於相應的圖像之上......我基本上完全失去了這一點。

回答

0

我認爲HTML本身就令人困惑。我也做了縮略圖類的相關層。當我們從左向右讀取HTML時呈現HTML。因此,在圖像之前放置標題會使圖像顯示在頂部並覆蓋文本。

HTML:

<div class="thumbnail"> 
    <a href="portfoliodetail.php?id=10"> 
    <img src="http://www.hlnarchitects.com/img/plain_red.png" /> 
    <div class="latestWorkTitle">title1</div> 
    </a> 
</div> 

CSS:

.thumbnail { 
    position: relative; 
    overflow: hidden; 
    float: left;} 

.portfolioOverview img { 
    width: auto; 
    height: auto;} 

.latestWorkTitle { 
    text-align: right; 
    font-size: 11px; 
    text-transform: uppercase; 
    background: yellow; 
    position: absolute; 
    padding: 6px; 
    top: 0; 
    left: 0;} 

對於這項工作,每個thumbnail類需要是relative開始爲每個單獨的層。所以thumbnail類被設置爲相對。 任何設置爲absolute.latestWorkTitle)的對象都將從相對對象的topleft位置開始。

你需要調整一些細節,但我希望這可以幫助。