製品画像と、ファイル フォルダーのように見えるオーバーレイ画像があり、その上に製品画像があるように見えるファイル フォルダー画像が望ましい効果です。これは完璧に機能します!
問題は、テキストが製品/オーバーレイ画像の後ろに表示されていることです。本当に下に配置したいのです。私は、これが次の下を強制すると考えて、閉じているdivを移動しようとしましたが、それでも後ろに表示されます。
html は次のとおりです。
<div class='kit-folder'>
<img class='overlay-image' src='/images/fldr_blue_overlay.png' width='150' height='106' />
<img src='$fldr_image' alt='press kit' class='kit-image' width='150' height='106'/>
Name: $fldr_name<br>Published: $pymnt_date
</div>
CSSは次のとおりです。
.kit-folder {padding:0px; width:auto; position:relative;}
img.overlay-image{position:absolute; left:0px; top:0px; z-index:10;}
img.kit-image{position:absolute; left:0px; top:0px; z-index:1;}