落地页Hero区块无position定位布局及伪元素三角形固定问题咨询

你之前的方案出问题核心原因是所有元素都用absolute定位脱离了文档流，.header_container没有实际高度，下方内容自然会排版错乱，固定像素的top值在不同屏幕尺寸下也必然错位。推荐用CSS Grid实现元素层叠，完全不需要自定义定位，还能保留正常文档流特性：

• 给.header_container开启Grid布局，将背景图容器和文本容器放在同一个网格区域实现自然重叠
• 背景图的两层图片同样用Grid实现层叠，img设置width: 100%; height: auto自动撑开容器高度，不需要写死高
• 文本内容全部用padding、margin调整位置，保留正常文档流，响应式适配只需要调整padding值即可

你可以直接替换原有CSS为以下代码：

/* 核心Grid布局实现层叠，无额外position定位 */
.header_container {
  max-width: 1255px;
  margin: 0 auto;
  display: grid;
  /* 所有子元素都放在同一个网格区域 */
  grid-template-areas: "hero";
  position: relative; /* 仅作为三角形的定位参考 */
}
.section_img, .header_wrapper {
  grid-area: hero;
}
/* 两层背景图用Grid层叠 */
.section_img {
  display: grid;
  grid-template-areas: "bg";
}
.bg_layer, .overlay {
  grid-area: bg;
  width: 100%;
}
.bg_layer img, .overlay img {
  width: 100%;
  height: auto;
  display: block;
}
/* 文本内容正常流排版，用padding调整位置 */
.header_wrapper {
  padding: 4rem 0 8rem 8rem; /* 上下padding预留展示空间，左padding对应原left:8rem */
  z-index: 10; /* 保证文本在背景图上层 */
}
.logo {
  margin-bottom: 6rem; /* 调整和h1的间距，替换原top:-420px定位 */
}
.header_wrapper.hero h1{
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  font-weight: 400;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 4rem; /* 替换原top:-290px定位 */
}
.header_wrapper h1 span{
  font-weight: 900;
}
.btn_main {
  font-size: 20px;
  font-weight: 400;
  padding: 15px 40px;
  background-color: var(--green);
  border-radius: 4px;
  border: none;
  cursor: pointer;
  margin-bottom: 2rem;
}
.btn_main a {
  color: inherit;
  text-decoration: none;
}
.header_wrapper .btn_code{
  margin-left: 50px;
  font-size: 14px;
  text-decoration: underline;
  margin-bottom: 2rem;
}
.btn_code a{
  color: #ff7d7d;
}
.header_wrapper p{
  font-size: 14px;
  color: #ff7d7d;
  line-height: 1.8;
}

三角形偏移是因为你用了固定百分比left:45%作为定位值，不同容器宽度下水平位置必然偏移，修复方案：

• 将伪元素的定位参考容器改为.header_container而非.header_wrapper，避免受文本容器位置影响
• 水平定位用left:50% + transform: translateX(-50%)实现始终水平居中，不受容器宽度变化影响
• 垂直位置相对于Hero容器底部定位，适配不同高度的Hero区块

修复后的三角形样式：

.header_container:after {
  content:'';
  position: absolute;
  bottom: 0;
  /* 水平居中核心代码 */
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  border-top: solid 30px var(--red);
  border-left: solid 30px transparent;
  border-right: solid 30px transparent;
  z-index: 20;
}

额外优化提示：原HTML中<button>标签嵌套<a>标签不符合HTML规范，建议直接把<a>标签改为按钮样式，或者给button绑定跳转事件。

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