Only last href is working

Question

I'm building a website with HTML and CSS. I'm trying to make 4 images contained in a white rectangle, and when those images get clicked it takes you to another part of the page.

Unfortunately, only the last of the 4 images actually takes you to the other part of the page. The other 3 can't even be clicked on. If I delete the last image and the div class it's contained in, the "new" last picture will now work even though it did not previously work before.

I'm pretty sure this is a CSS problem, as when I commented out the CSS code of the rectangle div all the images were working links (though they were jumbled up as the CSS code for their parent class was commented out).

This is the CSS code of the rectangle class and the images contained in it:

#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>

Any advice? Thank you!

Answer 1

change

 position:relative;

with

 display:inline-block;

like this:

    #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;
    }