Maximage插件位置：絕對

我使用Maximage jquery插件來創建全屏幻燈片。該插件允許您包含分佈在背景圖像頂部的HTML元素。我想使用HTML爲每個圖像提供一個標題，並將標題分層放置在我的網站頁腳的頂部（與Maximage分開）。我嘗試了各種定位，但找不到這樣做的方法，由於元素的順序，標題始終位於頁腳後面。有沒有人有任何想法我可能會這樣做？我的代碼如下後由maximage插件已經呈現 -Maximage插件位置：絕對

<div role="main"> 
<img id="cycle-loader" src="img/ajax-loader.gif" style="display: none;"> 
<div id="maximage" class="mc-cycle" style="width: 1282px; height: 294px; overflow: hidden; display: block;"> 
    <div class="mc-image " data-href="" style="background-image: url("img/showcase/1-redmire.jpg"); position: absolute; top: 0px; left: 0px; display: block; z-index: 8; opacity: 1; width: 1282px; height: 294px;" title=""> 
     <div class="slide-caption"> 
     <p>Bespoke house in Mercaston, Derbyshire. Image produced for client issue.</p> 
     </div> 
    </div> 
</div> 
</div> 
<footer> 
    <a id="arrow_left" href=""></a> 
    <a id="arrow_right" href=""></a> 
    <div id="controls"></div> 
</footer>

而CSS -

footer 
{ 
    bottom: 0px; 
    position: fixed; 
    width: 100%; 
    background: url(../img/bg-black.png) repeat; 
    color: #FFF; 
    height: 55px; 
    line-height: 55px; 
    border-bottom: 1px solid #333; 
} 
.slide-caption 
{ 
    position: fixed; 
    z-index: 998; 
    bottom: 20px; 
    left: 20px; 
    color: #ffffff; 
    background: #000000; 
    padding: 5px; 
}

來源

2012-07-07 Tom

你的問題似乎與一般的HTML風格的限制。處理z索引時的一般規則是對文檔樹中處於同一級別的元素進行z索引：因此在您的示例中，它將是z索引div[role="main"]和z索引<footer>。對於一些現代瀏覽器，這可以通過塊級元素來完成，但是如果您試圖準確回退到舊版瀏覽器或絕對定位元素（這就是Henrik無法複製您的問題的原因），則它不一致。我不知道在絕對定位的父母和子元素之間滑動外來元素的方法......如果有人這樣做，請讓我知道。

我可以看到的最簡單的解決方案是將您的標題取出並使用jQuery動態地將其寫入頁腳。這可以通過Cycle的before（）和after（）動畫回調（http://jquery.malsup.com/cycle/options.html）輕鬆完成。

我已經空置了你一個例子，一個的jsfiddle： http://jsfiddle.net/eDR4v/1/

希望這有助於。

來源

2012-07-09 16:28:39 Aaron

您所提供的代碼似乎做的工作，不是嗎？當我將它插入到jsfiddle http://jsfiddle.net/YemKf/中時，標題顯示在頁腳上方。

來源

2012-07-07 23:46:15

Maximage插件位置：絕對

回答

相關問題