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>

将一个图像叠加到另一个图像而不扩展父高度

1 个答案: