html - 在 HTML 中，如果我将一个 img 放置在另一个 img 之后，我如何才能让它不占用两倍的空间？

Question

如果我只有一张图片，我的定位就没问题。但是，如果我在它后面添加第二个(position: relative 和 z-index 应用)，定位就会倾斜，div 似乎比它占用更多空间之前有(它们都位于同一个 div 中)。

它们的大小相同。

这是我的 HTML:

<div class="resume-header">
    <a href="resume.pdf">
        <img src="media/resume-icon.png" alt="Resume icon" title="Download resume (PDF)" class="top-image" style="position:relative;z-index:2;">
        <img src="media/resume-icon-download.png" style="position:relative;right:132px;z-index:1;visibility:hidden;"><br>
        <span class="center-text">Resume (PDF)</span>
    </a>
</div>

可能相关的 CSS:

.resume-header {
    display: inline-block;
    position: relative;
    left: 130px;
    text-align: center;
}

.resume-header a {
    color: #333;
    font: 10px "Lucida Grande", Helvetica, sans-serif;
    text-align: center;
    text-decoration: none
}

Answer 1

当你想使用 z-index 时，你应该使用 position: absolute 来定位你的元素。