Only last href is working - html

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">
<img src="../assets/img/hardware.png" height="200px" width="200px" />
<p><b>Hardware</b></p>
</div>
<div class="software">
<img src="../assets/img/software.png" height="200px" width="200px" />
<p><b>Software</b></p>
</div>
<div class="config">
<img src="../assets/img/gear.png" height="200px" width="200px" />
<p><b>Config</b></p>
</div>
<div class="code">
<img src="../assets/img/code.png" height="200px" width="200px" />
<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;
}

Answer 2

Just remove text-align: center; property from #rectangle

Answer 3

This happens because the last div covers the others. Therefore when you hover the other boxes, you are actually hovering the div of the last box.
Usually, using the dev tools in google chrome you can see what's happening actually.
Right click -> Inspect