HTML/CSS中如何让Experience区块定位在Canvas下方不重叠？

问题根源 #

1. 全局*选择器强制所有元素继承background-color: black，直接覆盖了.experience-section的自定义背景色。
2. .webgl使用position:absolute脱离文档流，未设置层级和尺寸，默认覆盖视口且容易和其他元素层级冲突。
3. .page设置position:absolute后脱离文档流，内部元素的间距计算脱离页面正常布局逻辑，导致区块错位。

修复方案 #

修改CSS代码如下：

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body,html{
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background-color: black; /* 将背景色移至body，避免强制所有子元素继承 */
}

.webgl{
  position:absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* 设置为背景层级，不遮挡上层内容 */
}

.title{
  color:white;
  margin-top: 300px;
  width:550px;
  font-size: 100px;
  font-weight: 800;
  outline: none;
  text-transform: uppercase;
  background: linear-gradient(135deg, #5335cf 0%, #de005e 25%, #f66e48 50%, #de005e 75%, #5335cf 100%);
  background-size: 400%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  animation: animate 10s linear infinite;
}

@keyframes animate {
  to{
    background-position: 400%;
  }
}

.page{
  z-index: 2;
  position: relative; /* 改为相对定位，回归正常文档流 */
  padding: 0 20px; /* 可选：添加左右内边距，避免内容贴边 */
}

header .header-contain{
  display: flex;
}

.experience-section {
  margin-top: 80px; /* 设置合理的标题下方间距 */
  padding: 20px;
  background-color: #f0f0f0;
  color: #333;
  position:relative;
}

修改说明 #

• 背景色修复：将全局背景色从*选择器移到body，保证子元素可以自定义背景色。
• Canvas层级与尺寸：给.webgl添加全屏定位属性和z-index:-1，让它作为底层背景，不再遮挡上层内容。
• 页面容器布局：把.page的绝对定位改为相对定位，让内部元素遵循正常文档流布局，经验区块会自然排列在标题下方。
• 间距优化：移除.experience-section重复的margin-top，设置合适的数值保证布局美观。

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