绝对定位跨度自动被推离网页

Question

这是单页网站的第三部分，每个部分都占据视口的总高度和宽度。 div 'gun' 中的 span 元素在 Firefox 浏览器中显示为下推，创建了一个空白，而在 Edge 中看起来一切都很好。我认为这是因为相对和绝对定位（这是在回答几个空白问题时提到的），但我不知道如何解决它。

这里只是页面的那部分的 HTML（'end' div 是网站整个第三部分的包装）：

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}


/* Hide scrollbar for Chrome, Safari and Opera */

body::-webkit-scrollbar {
  display: none;
}


/*Ending */

.end {
  background-color: pink;
  width: 100%;
  height: 100vh;
  position: relative;
}


/* Gun and company */

.gun img {
  position: absolute;
  width: 38%;
  height: auto;
  object-fit: contain;
  transform: rotate(75deg) translate(20rem, -24.5rem);
  filter: sepia(0.8);
}

.gun-shadow {
  position: absolute;
  top: 32rem;
  left: 46rem;
  width: 100px;
  /*80 px, probably*/
  height: 370px;
  /*385px*/
  background-image: linear-gradient(-90deg, #ffbebe, #fffaf0);
  border-radius: 100%;
  transform: rotate(90deg);
}

.gun-shadow2 {
  position: absolute;
  top: 34.3rem;
  left: 46.5rem;
  width: 80px;
  /*60px*/
  height: 285px;
  /*300px*/
  background-color: #202b3a;
  border-radius: 100%;
  transform: rotate(90deg);
}

.spotlight {
  position: absolute;
  top: 5.8rem;
  left: 32.75rem;
  width: 530px;
  height: 600px;
  background-image: linear-gradient(-0deg, #202b3a, transparent);
  clip-path: polygon(0 0, 100% 0, 63.85% 150%, 33.35% 150%);
  /* polygon(0 0, 100% 0, 80% 100%, 20% 100%) */
  opacity: 0.4;
}

.gun-shadow2::after {
  width: 80px;
  height: 285px;
  background: fuchsia;
  border-radius: 50%;
}

<div class="end">
  <div class="gun">
    <img src="https://cdn.pixabay.com/photo/2013/07/13/11/52/pistol-158868_960_720.png" alt="the gun">
    <span class="gun-shadow"></span>
    <span class="gun-shadow2"></span>
    <span class="spotlight"></span>
  </div>
  <div class="footer">
    <div class="social-icons1">
      <ul>
        <li>
          <a href="#" class="fas fa-at"></a><span class=" content content1">Click to Email</span>
        </li>
        <li>
          <a href="#" class="fas fa-envelope-open"></a><span class=" content content2">We do have a mailbox</span>
        </li>
        <li>
          <a href="#" class="fas fa-phone"></a><span class=" content content3">Call us maybe</span>
        </li>
      </ul>
    </div>

代码可能有几个问题。如果您需要任何其他信息来了解情况，请告诉我。谢谢。

边缘版本：

火狐版本：

Answer 1

最快的解决方法是在 .gun-shadow 、 .gun-shadow2 和 .spotlight 中将 2rem 属性从 top 减少。

另一种方法是将top 属性更改为bottom 属性并为其指定一个数字以将其放置在您想要的任何位置。 试试这种风格：

.gun-shadow {
    position: absolute;
    bottom: -128px;
    left: 46rem;
    width: 100px;
    /*80 px, probably*/
    height: 370px;
    /*385px*/
    background-image: linear-gradient(-90deg, #ffbebe, #fffaf0);
    border-radius: 100%;
    transform: rotate(90deg);
}

.gun-shadow2 {
    position: absolute;
    bottom: -85px;
    left: 46.5rem;
    width: 80px;
    /*60px*/
    height: 285px;
    /*300px*/
    background-color: #202b3a;
    border-radius: 100%;
    transform: rotate(90deg);
}

.spotlight {
    position: absolute;
    bottom: 61px;
    left: 32.75rem;
    width: 530px;
    height: 600px;
    background-image: linear-gradient(-0deg, #202b3a, transparent);
    clip-path: polygon(0 0, 100% 0, 63.85% 150%, 33.35% 150%);
    /* polygon(0 0, 100% 0, 80% 100%, 20% 100%) */
    opacity: 0.4;
}

一个非常重要的事情是使用像 px 这样的绝对单位而不是 rem