html - 在不扩展父级高度的情况下将一个图像与另一个图像叠加

Question

我在页面上有一张正面图片，像这样插入:

<h1>
    <a href...>
        <img .../>
    </a>
</h1>

现在我想添加另一个图像链接，以覆盖第一个(它是较小的图像所以没问题):

<h1>
    <a href...>
        <img .../>
    </a>
    <a href... style="position:relative;top:-150px;">
        <img ... style="height:150px"/>
    </a>
</h1>

它做了我想要的，但是父 H1 的高度仍然被这些 150px 放大，留下愚蠢的空白空间。

我将 H1 的高度设为预定义常量来解决这个问题，但是我对更合适/优雅的解决方案感兴趣。

Answer 1

首先我需要提一下，如果您使用内联样式，请将其删除并添加外部样式表。

下面我给出了内联样式的答案只是因为你在你的问题中也使用了它们。尝试以下操作:

<h1 style="position:relative;">
    <a href...>
        <img .../>
    </a>
    <a href... style="position:absolute;top:0;">
        <img ... style="height:150px"/>
    </a>
</h1>