设置display:flex的hero容器如何将TikTok图标放置在页面右上角

你不需要删除hero容器的display:flex属性，通过绝对定位即可实现需求，不会影响原有文本布局：

操作步骤 #

• 第一步：给.hero容器添加position: relative属性，作为TikTok图标定位的父级参照
  修改后的.hero CSS如下：

.hero {
  width: 100vw;
  height: 88vh;
  display: flex;  /* 无需删除 */
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative; /* 新增这行 */

  /* 背景样式保持不变 */
  background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), url(xxx);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;   
}

• 第二步：新增.header的CSS规则，通过绝对定位将图标固定到右上角

.header {
  position: absolute;
  top: 20px; /* 可自定义调整距离顶部的间距 */
  right: 30px; /* 可自定义调整距离右侧的间距 */
}

• 可选：如果需要调整图标显示大小，可新增.tiktok-logo的尺寸规则

.tiktok-logo {
  width: 32px; /* 按需调整数值即可 */
  height: auto;
}

原理说明 #

绝对定位的元素会脱离正常文档流，不会参与flex容器的布局计算，因此完全不会干扰原有.overlay容器内文本的居中效果，原有布局不会出现任何错乱。

内容的提问来源于stack exchange，提问作者tretuser