Css 将标题覆盖在图像上而不是文本上

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

如果项目包含图像，则标题应覆盖在图像顶部

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

第一项

Lorem ipsum dolor sit amet，Concertetur Adipising
精英。奥奇康塞特图尔的佩伦茨克，拍卖人risus
塞德，再见。整型鸟爪前庭
毛里斯，我是布兰迪·尼布前庭。

第二项

Lorem ipsum dolor sit amet，Concertetur Adipising
精英。奥奇康塞特图尔的佩伦茨克，拍卖人risus
塞德，再见。整型鸟爪前庭
毛里斯，我是布兰迪·尼布前庭。

我创建了一个JSFIDLE供您使用：

为了在图像顶部覆盖标题，我尝试在标题上设置“位置：绝对”。这很好，但是当没有图像时，它也会使标题位于文本顶部。这是我的问题——让它在有图像和没有图像的情况下都能工作

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

---

感谢您的帮助！：）

像这样？我认为使用纯CSS很难动态地解决它，如果你限制所有项目的标题高度（比如将其固定在

30px

），你可以尝试这个简单的解决方案：仅仅定位图像就很可能行得通……不是吗？

<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>