html - 只有最后一个 href 有效

Question

我正在使用 HTML 和 CSS 构建一个网站。我正在尝试将 4 个图像包含在一个白色矩形中，当这些图像被单击时，它会将您带到页面的另一部分。

不幸的是，只有 4 张图片中的最后一张真正将您带到页面的其他部分。其他3个甚至无法点击。如果我删除最后一张图片及其包含的 div 类，"new"最后一张图片现在可以使用，即使它以前没有工作。

我很确定这是一个 CSS 问题，因为当我注释掉矩形 div 的 CSS 代码时，所有图像都是有效的链接(尽管它们由于父类的 CSS 代码被注释掉而变得困惑) .

这是矩形类的 CSS 代码以及其中包含的图像:

#rectangle {
  background: white;
  width: 1000px;
  height: 500px;
  position: absolute;
  left: 500px;
  top: 200px;
  text-align: center;
}

#rectangle h1 {
  font-size: 50px;
  position: relative;
  top: 10px;
}

#rectangle .hardware {
  position: relative;
  top: 50px;
  right: 340px;
}

#rectangle .software {
  position: relative;
  bottom: 200px;
  right: 100px;
}

#rectangle .config {
  position: relative;
  bottom: 450px;
  left: 120px;
}

#rectangle .code {
  position: relative;
  bottom: 700px;
  left: 350px;
}

<div id="rectangle">
  <h1>Welcome to the docs.</h1>
  <h3>Learn how to build your own Olympia</h3>

  <div class="hardware">
    <a href="hardware.html"><img src="../assets/img/hardware.png" height="200px" width="200px" /></a>
    <p><b>Hardware</b></p>
  </div>

  <div class="software">
    <a href="software.html"><img src="../assets/img/software.png" height="200px" width="200px" /></a>
    <p><b>Software</b></p>
  </div>

  <div class="config">
    <a href="config.html"><img src="../assets/img/gear.png" height="200px" width="200px" /></a>
    <p><b>Config</b></p>
  </div>

  <div class="code">
    <a href="code.html"><img src="../assets/img/code.png" height="200px" width="200px" /></a>
    <p><b>Code</b></p>
  </div>
</div>

有什么建议吗？谢谢!

Answer 1

改变

 position:relative;

与

 display:inline-block;

像这样:

    #rectangle .software {
       /*           position: relative;*/
        display: inline-block;
        bottom: 200px;
        right: 100px;
    }

    #rectangle .config {
    /*          position: relative;*/
        display: inline-block;
        bottom: 450px;
        left: 120px;
    }

    #rectangle .code {
    /*          position: relative;*/
        display: inline-block;
        bottom: 700px;
        left: 350px;
    }