javascript - 单击与目标重叠的目标区域

Question

我有 4 个简单的 img 和 h4，它们针对的是第 3 方链接。 projectImage2 类与其他 3 个类重叠，并且页面的大部分内容都是针对点击的

<a href="https://eliottenos.github.io/eliott-game/"<div class="game"<h4>Game Application</h4></div></a>

<a href="https://github.com/eliottenos/filebucket-client"><img class="projectImage2"src="http://i.imgur.com/iiGiuX7.png" 
title="FileBucket Application" /></a>

<a href="https://eliottenos.github.io/filebucket-client/"><div 
   class="fileBucket"><h4>FileBucket Application</h4></div></a>

   <a href="https://github.com/eliottenos/eliott-game"><img 
   class="projectImage1"src="http://i.imgur.com/iiGiuX7.png" title="Game 
   Application" /></a>

我认为唯一可能导致它失败的是CSS？

.game {
  position: absolute;
  padding-left: 250px;
  padding-right: 250px;
  padding-top: 130px;
}

.fileBucket {
  position: absolute;
  padding-left: 250px;
  padding-right: 250px;
  padding-top: 200px;
}

.projectImage2 {
  height: auto;
  width: auto;
  top: 450px;
  left: 440px;
  max-width: 100px;
  max-height: 70px;
  position: absolute;
  display: inline;
}

.projectImage1 {
  height: auto;
  width: auto;
  top: 380px;
  left: 440px;
  max-width: 100px;
  max-height: 70px;
  position: absolute;
  display: inline;
}

Answer 1

所以我仔细看了一下，问题不仅在于链接，还在于你的html结构如何，几乎所有东西都有position:absolute，所以所有东西都重叠，我强烈建议你使用引导模板作为开始，您可以使用 bootstrap 轻松设置列和行，并且它将响应。我试图将链接放在正确的位置，但是因为所有内容都有position:absolute，所以我必须更改html的布局方式，例如html中另一部分下方的一些内容会弹出在顶部该内容。

你必须将你的html视为水平行，无论它们是向左还是向右，如果它们出现在同一行，请将其放在一个div下。

例如，对于带有 bootstrap 的内容，您可以执行以下操作:

<div class="row">
  <div class="col-md-4">
      Contact Details, Phone Number etc...
  </div>
  <div class="col-md-8">
      <p>
      Fullstack Web Developer coming from a diverse, technical business background. Having worked and traveled the world, I have acquired a breadth of skill sets through different industries which has culminated in my goal of becoming a trained fullstack web developer.
     </p>
     <ul class="main">
        <li>Write HTML, CSS, and JavaScript for displays in contemporary browsers with responsive design practices</li>
        <li>Develop back-end web applications and APIs using a modern programming languages and MVC web development framework</li>
        <li>Collaborate with teams using an agile development workflow and widely-accepted collaboration practices using Git and GitHub for version control</li>
        <li>Improve and demonstrate web development skill-set by building a series of full-stack web applications</li>
     </ul>
  </div>
</div>

左侧占 4 列，右侧占 8 列，总列宽总和为 12。所以您也可以这样做。

<div class="row">
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
</div>