css文本下面叠加图像

Question

我有一个产品图片和一个覆盖图像，看起来像一个文件夹，其效果是文件夹图像看起来像是在它上面有产品图像。这非常有效！

问题是，文本显示在产品/叠加图像后面，我真的希望它放在下面。我已经尝试过移动关闭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;}

Answer 1

大约4个小时后，我发现我可以a）在文本前关闭div并且B）在kit-folder上设置高度：110px，文本显示在它应该的位置。