在图像上覆盖标题但不覆盖文本

Question

我有一个项目列表，其中每个项目都包含标题和文本。该项目还可以在标题和文本之间包含图像。

如果项目包含图像，则标题应叠加在图像顶部。

如何通过将CSS应用于以下标记（无法更改！）来实现此目的：

<div class="wrapper">
    <h2>First item</h2>
    <img src="MyImage.jpg" width="400" height="200" />
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing 
        elit. Pellentesque in orci consectetur, auctor risus 
        sed, adipiscing neque. Integer ornare vestibulum 
        mauris, quis blandit nibh vestibulum sed.
    </p>
</div>
<div class="wrapper">
    <h2>Second item</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing 
        elit. Pellentesque in orci consectetur, auctor risus 
        sed, adipiscing neque. Integer ornare vestibulum 
        mauris, quis blandit nibh vestibulum sed.
    </p>
</div>

我为你创造了一个jsfiddle：http://jsfiddle.net/9GSB8/

要在图片顶部叠加标题，我已尝试设置＆＃34; position：absolute＆＃34;在标题上。这样可以正常工作，但是当没有图像时，它也会使标题位于文本的顶部。这是我的问题 - 无论是否有图像都可以使用。

请注意，标题可以足够长，以便跨越两行。

任何帮助表示赞赏！ ：）