这是定位问题。删除所有定位代码，就可以开始了。

img {width: 64px;}

<div class="socialBanner">
  <a href="https://github.com/thesd5x"><img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="githubLogo" class="githubLogo"></a>
  <a href="https://www.linkedin.com/in/jordan-fichter-a40762152/"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/LinkedIn_icon_circle.svg/1200px-LinkedIn_icon_circle.svg.png" alt="linkedinLogo" class="linkedinLogo"></a>
</div>

看着代码，我想不出一个理由来使用top: -1260px的社会图标以外的一些动画移动他们从'以上'。
我在一定程度上复制了在署名下显示三个图标的示例图像。正如你在CSS片段中看到的，通过仔细规划 * flexbox * 元素和正确的对齐，你可以有一个响应迅速的"横幅"，而不需要媒体查询。

• 横幅.me的左侧是具有三行的垂直灵活框容器，其中.socialBanner是灵活框行容器。
• 横幅.menu的右侧是一个水平的flexbox容器，其中包含四个菜单选项。

调整浏览器大小时，* flexbox * 对齐和环绕选项使横幅整齐地适合>= 320px宽的视口。
看看html { font-size: calc(0.625vmin + 0.75rem) }中的小数学公式，它计算相对于最小视口大小（vmin）的根font-size，结果为：

• font-size: 14px在320px视口最小尺寸设备上
• font-size: 20px在1280px视口最小尺寸设备上
• 所有其他字体大小都是相对于当前视口最小大小计算的。对于视区大小的每个160px变化，字体大小变化0.25px
• 数学：点p1（320，14）和p2（1280，20）的线性方程y = mx + b=〉* y = 0.00625x +12 * 转换为CSS，对x使用100vmin，对b使用0.75rem（即12 / 16 = 0.75rem）。
• • 顺便说一句***站点范围内 * 仍然需要您将代码复制到每个单独的html文件中，除非您使用一些框架自动进行复制...
• • 片段**

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

*, ::before, ::after { box-sizing: border-box }

/* Linear equation y=mx+b using points p1(320,14) p2(1280,20) */
html { font-size: calc(0.625vmin + 0.75rem) }

body {
    margin: 0;                          /* remove default spacing */

    display: grid; place-items: center; /* Easy centering demo banner */
    width: 100%; min-height: 100vh;     /* at least full screen */

    font-size: 1rem;                    /* inherit responsive root font */
    font-family: Poppins, sans-serif;

    background-color: #222222; color: White;
    cursor: default;
}

a { text-decoration: none; color: currentColor }

.main-banner {
    width: 100%; min-height: 40vh;
    padding: 1.5rem 2.5rem;
    background-color: #c1e1c1;
}

/* horizontal orientation */
.main-banner, .me, .menu, .socialBanner {
    /* Flexbox layout */
    display: flex; flex-wrap: wrap;

    /* Flexbox alignment */
    align-items: center;

    /* text alignment */
    text-align: center;
}
/* vertical orientation */
.me { flex-direction: column }

/* Flexbox alignment specifics */
.socialBanner     { justify-content: center }
.main-banner      { justify-content: space-around  }
.menu, .me        { justify-content: space-between }

.me > *           { width: 100%; text-align: center; font-weight: bold }
.name             { font-size: 3.5em ; line-height: 1 }
.byline           { font-size: 1.25em; line-height: 2 }
.socialBanner a   { display: block; padding: 1rem 0.5rem 2rem 0.5rem } 

.socialBanner img {
    display: block; /* removes tiny whitespace below images */
    border-radius: 50%
} 

.menu             { color: #b5b5b7; font-size: 1.25em; font-weight: bold }
.menu > *         { border-bottom: 1px solid transparent; flex: 1; padding: 1rem; cursor: pointer }
.menu > :hover    { border-bottom: 1px solid White; color: White }

<div class="main-banner">
    <div class="me">
        <div class="name"  >jordan fichter</div>
        <div class="byline">portfolio + ux design + web development</div>

        <div class="socialBanner">
            <a target="_blank" href="https://github.com/thesd5x"><img src="https://picsum.photos/40?random=1" alt="githubLogo" class="githubLogo"></a>
            <a target="_blank" href="https://www.linkedin.com/in/jordan-fichter-a40762152/"><img src="https://picsum.photos/40?random=2" alt="linkedinLogo" class="linkedinLogo"></a>
            <a target="_blank" href="https://google.com"><img src="https://picsum.photos/40?random=3" alt="googleLogo" class="googleLogo"></a>
        </div>
    </div>

    <div class="menu">
        <div>welcome</div>
        <div>resume </div>
        <div>about  </div>
        <div>contact</div>
    </div>
</div>