如何在图片上层叠加显示2个链接元素现有布局方案无法生效求助

云原生阿岚

2026-10-5

实现方案

核心思路是给图片新增相对定位的父容器，按钮使用绝对定位叠加在父容器范围内，不会影响其他模块的布局逻辑。

修改后的HTML代码

<img src="images/portfolioAni.gif">
<div class="font">
    <p class="note">Welcome to my Portfolio, below you will find a menu of <br>
     all my coding assignments I completed in school. Some basic <br>
     exercices as well as entire websites using HTML, CSS, <br> 
     Javascript,Bootstrap and PHP.</p>
</div>
<!-- 新增图片父容器 -->
<div class="img-container">
    <img src="images/web.jpg" class="img2">
    <!-- 两个链接按钮放在父容器内 -->
    <a href="Project.html" class="button">
        <p class="buttonint">HTML and CSS</p>
    </a>
    <a href="Project.html" class="button">
        <p class="buttonint">Javascript</p>
    </a>
</div>
<div class="block"></div>

新增/调整的CSS代码

原有CSS代码不需要删除，新增以下样式即可：

/* 新增父容器样式 */
.img-container {
  position: relative;
  width: 100%;
}
/* 调整按钮的定位属性，原有width、height等属性保留即可 */
.button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
/* 第一个按钮垂直位置，可自行调整数值适配需求 */
.button:nth-of-type(1) {
  top: 25%;
}
/* 第二个按钮垂直位置，可自行调整数值适配需求 */
.button:nth-of-type(2) {
  top: 45%;
}