1

Maximagejqueryプラグインを使用してフルスクリーンのスライドショーを作成しています。プラグインを使用すると、背景画像の上に重ねられたHTML要素を含めることができます。HTMLを使用して各画像にキャプションを付け、サイトのフッターの上にキャプションを重ねたいと思います（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;
}
4

2 に答える 2

0

あなたが提供したコードはその仕事をしているようですよね？jsfiddle http://jsfiddle.net/YemKf/に挿入すると、フッターの上にキャプションが表示されます。

于 2012-07-07T23:46:15.477 に答える
0

あなたの問題は、一般的なHTMLスタイルの制限があるようです。z-indexesを使用する場合の一般的な規則は、ドキュメントツリーの同じレベルにある要素をz-indexすることです。したがって、この例では、z-indexingdiv[role="main"]とz-indexingになり<footer>ます。一部の最新のブラウザーでは、これはブロックレベルの要素で実現できますが、古いブラウザーに正確にフォールバックしようとしている場合、または要素を完全に配置している場合は一貫性がありません（これが、Henrikが問題を再現できなかった理由です）。絶対位置にある親要素と子要素の間に外部要素をスライドさせる方法がわかりません...誰かがスライドする場合は、私に知らせてください。

私が見ることができる最も簡単な解決策は、キャプションを引き出して、jQueryを使用してフッターに動的に書き込むことです。これは、Cycleのbefore（）およびafter（）アニメーションコールバック（http://jquery.malsup.com/cycle/options.html）を使用して簡単に実行できます。

私はjsfiddleであなたのために例をダミーにしました：http： //jsfiddle.net/eDR4v/1/

うまくいけば、これがお役に立てば幸いです。

于 2012-07-09T16:28:39.140 に答える