具有绝对和相对项目的Z索引发行以及边界发行

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>

此外，无论我将背景更改为绝对还是相对，无论如何（请注意，此问题仅在较大的屏幕上显示），我都无法将黑色正方形移到窗口的边缘（左右） （整个系统无法在固定的背景下运行，因为您无法再滚动浏览该网站）。