HTML <A href> link to another html doesn't work

Question

I'm trying to link to another html in the same folder, but it doesn't work. The bottom ones with id="diaweiter" and id="diazurueck" work, but the upper ones don't and I can't figure out why.

@charset "utf-8";

/* CSS Document */

body {
  width: 1920px;
  height: 1080px;
  margin: 0 0 0 0;
  background-color: #000000;
}

#startanimation {
  position: absolute;
  margin: 0 0 0 0;
}

#content {
  position: fixed;
  width: 1920px;
  height: 1080px;
  margin: 0 0 0 0;
}

#dia {
  position: fixed;
  width: 1039px;
  height: 621px;
  margin-top: 459px;
  margin-left: 881px;
}


/* Menue */

#bgweiter {
  position: fixed;
  width: 125px;
  height: 215px;
  border: 1px solid rgb(170, 12, 12);
  margin-left: 1800px;
  z-index: 20;
}

#bgzurueck {
  position: fixed;
  width: 125px;
  height: 215px;
  border: 1px solid rgb(170, 12, 12);
  z-index: 10;
  pointer-events: all;
}

#diaweiter {
  position: fixed;
  width: 125px;
  height: 125px;
  border: 1px solid rgb(170, 12, 12);
  margin-top: 705px;
  margin-left: 1800px;
  z-index: 20;
  pointer-events: all;
}

#diazurueck {
  position: fixed;
  width: 125px;
  height: 125px;
  border: 1px solid rgb(170, 12, 12);
  margin-top: 705px;
  margin-left: 875px;
  z-index: 10;
}


/* uebergreifend */

a:active {
  opacity: 0.1;
}

a.start {
  height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<a href="dynwald3_1.html">
  <div id="bgweiter"> </div>
</a>

<a href="dynwald1_1.html">
  <div id="bgzurueck"> </div>
</a>

<div id="content">
  <div id="bg1">
    <image src="bg/NPZ Dynamik Wald Layout2.png" width="1920px" height="1080px" />
  </div>
</div>


<div id="dia">
  <div id="bg1">
    <image src="dias/02/Wald10.png" width="1039px" height="621px" />
  </div>
</div>

<a href="dynwald2_2.html">
  <div id="diaweiter"> </div>
</a>

<a href="dynwald2_3.html">
  <div id="diazurueck"> </div>
</a>

It's really frustrating that the lower ones in the code work, while the upper don't and I'm completely lost on what to do.

I googled and tried different ways to link but nothing helps.

Answer 1

This might just be a positioning issue: As you are using position: fixed with large margins, some elements might actually be rendering outside the viewport.

You can see how pressing Tab you can get all of them to focus (and you'll see the link show up in the bottom-left corner of your browser):

Placing them differently makes all of them visible and clickable regardless of scroll position (assuming that's what you want):

body {
  width: 1920px;
  height: 1080px;
  margin: 0 0 0 0;
  background-color: #000000;
}

#bgweiter {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  z-index: 20;
  background: red;
}

#bgzurueck {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  z-index: 10;
  background: green;
}

#diaweiter {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
  z-index: 20;
  background: blue;
}

#diazurueck {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
  z-index: 10;
  background: cyan;
}

<a href="dynwald3_1.html">
  <div id="bgweiter"> </div>
</a>

<a href="dynwald1_1.html">
  <div id="bgzurueck"> </div>
</a>

<a href="dynwald2_2.html">
  <div id="diaweiter"> </div>
</a>

<a href="dynwald2_3.html">
  <div id="diazurueck"> </div>
</a>