絕對定位的div將不會保留在原地

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

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

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

2013-06-19 2339870

我認爲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）的對象都將從相對對象的top和left位置開始。

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

來源

2014-05-19 08:18:40 TomFirth

絕對定位的div將不會保留在原地

回答

相關問題