Выпуск Z-Index с абсолютными и относительными пунктами и проблемой границ

Question

У меня проблема с отображением текстовых элементов перед моим верхним слоем (из черных квадратов), хотя мой нижний слой (изображения) просто в порядке. Вот ключевые части HTML, CSS и JQuery:

КОД HTML:

jQuery(function($) {
  $(".NSAimg").mouseover(function() {
    $(".NSAimg").css("opacity", "1");
  });

  $(".NSAtxt").mouseover(function() {
    $(".NSAtxt").css("opacity", "1");
  })

  $("a").attr("target", "_blank");
});

body {
  position: absolute;
  background-color: blue;
  margin: 0;
}

.background {
  width: 100%;
  background-color: blue;
  position: relative;
  z-index: 2;
  border: 0;
  padding: 0 margin:0;
}

.blackSquare {
  height: 2vw;
  width: 2vw;
  position: relative;
  display: inline-block;
  background-color: black;
  margin: 0px;
  padding: 0px;
  border: 0px;
  float: left;
  font-size: 0;
  z-index: 25;
  opacity: 1;
}

.noWork {
  pointer-events: none;
}

.Work {
  pointer-events: auto;
}

.NSAimg {
  width: 20vw;
  position: absolute;
  left: 10vw;
  top: 10vw;
  float: left;
  margin: 0px;
  padding: 0px;
  border: 0px;
  opacity: 0;
  z-index: 1;
}

.NSAtxt {
  font-size: 1.5vh;
  font-style: bold;
  text-align: left;
  color: red;
  transform: rotate(90deg);
  font-family: roboto mono;
  position: absolute;
  z-index: 1;
  left: 18vw;
  top: 22vw;
  opacity: 0;
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">
</div>

<div class="blacksSquare">
</div>

<a href="https://en.wikipedia.org/wiki/National_Security_Agency">
  <div class="NSAtxt">39°06'31.6"N 76°46'13.2"W</div>
</a>

<div class="images">
  <div class="NSA">
    <img src="https://via.placeholder.com/150" class="NSAimg">
  </div>
  </div>

Кроме того, я не могу заставить свои черные квадраты перейти к краю (справа и снизу) моего окна, несмотря ни на что (обратите внимание, что эта проблема отображается только на больших экранах), независимо от того, меняю ли я фон на абсолютный или относительный (вся система не работает с фиксированным фоном, потому что вы больше не можете прокручивать сайт).