在不擴展父級高度的情況下，將一個圖像與另一個圖像重疊

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>