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

Question

I had a front image on the page, inserted like this:

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

Now I want to add another image link, to overlay first one (it is smaller image so it would be Ok):

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

It does what I want, but the height of the parent H1 is still enlarged by these 150px leaving silly empty space.

I made height of H1 predefined constant to solve this, however I'm interested in more proper / elegant solution.

Answer 1

First I need to mention if you are using inline styles remove it and add an external style sheet.

Below I am giving the answer with inline styles just because you have used them too in your question .Try the following:

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