如果我只有一张图片,我的定位就没问题。但是,如果我在它后面添加第二个(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
}
最佳答案
当你想使用 z-index
时,你应该使用 position: absolute
来定位你的元素。
关于html - 在 HTML 中,如果我将一个 img 放置在另一个 img 之后,我如何才能让它不占用两倍的空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14485217/