ResponsiveSlides.jsに静止画像を重ねて表示するには・・・
やっとわかった～～～
気が付けば、簡単な話だったのですが、サイトのスライドショーの前に、静止画像を重ねて常に見える状態にしたかったのですが、どうしてもできなくて・・・・・
まず CSSでスライドショー部分がblock指定してあったので、静止画像を表示させたい新たなスタイルもBOXに指定、positionは、スライドショーが、position:relative; にし、静止画像のpositionnを position:absolute;にし、位置を決めます。通常のCSS3の画像を重ねて表示させる方法をとったのですが、どうしても、スライドショーが前に来てしまいます。・・・・・
う～～んって悩んでいろいろ調べたら、boxはレイヤーの重なり順っていう z-indexっていうのがあったのをやっと思い出し、静止画像を前に出したいため、z-idex:1; スライドショーのz-index:0;ってしてやったら、やっと思うとおりに表示できた。よかった～～～
言葉で言ってもわかりづらいと思うので、そのままのCSSってわけではないけど、こんな感じって例を・・・・
|
#contents .inner .slide img{ display: block; position: relative z-index:0; } #contents .seishi-ga img{ display: block; position: absolute; top: 300px; right: 300px; z-index:1; } |
z-indexについは、ここを参照してください
http://www.dspt.net/stylesheet_css/005/019.html