Javascript 当文本部分过长时，动态生成的英雄横幅文本在3张行动卡下方运行，尝试添加样式以防止重叠

我有一个动态生成的英雄横幅，下面是标题和正文，后面是三张动作卡，就在英雄横幅的底部

我的问题是，每当有一个英雄横幅，其特点是较长的正文文字，它运行在后面的行动卡如下所示：

我试着调整HeroText的页边距底部，但它仍然在卡片后面运行。我试图调整CardRow和HeroText，这样CardRow就可以根据文本的数量向下推，同时仍然与底部的HeroMage重叠，但我不知道该怎么做

我在这里添加了一个代码沙盒：

并在此处包含我的所有代码：

import "./styles.css";
import styled from "styled-components";

export default function App() {
  return (
    <ContentContainer>
      <Container>
        <HeroElement>
          <HeroTitle>
            Modern competitive gaming with a huge nostalgic past built with
            traders and collectors in mind.
          </HeroTitle>
          <HeroText>
            Pokem ipsum dolor sit amet Seel Buizel Walrein Ditto Liepard
            Charmeleon. Flamethrower Staryu Nidoqueen Pallet Town Breloom
            Forretress Weepinbell. Sand-Attack Mienshao Slugma Slaking Luxio
            Rage Jesse. Grass Zigzagoon Hippopotas incididunt ut labore Magby
            Jesse Pokemon Heroes. Zephyr Badge Staravia Hitmontop Sharpedo
            Pidgeotto Venipede Gothitelle. Wing Attack Combusken Gothorita
            Zoroark Venusaur Haunter Sceptile. Pikachu Cascoon Rotom Whirlipede
            Cloyster.
          </HeroText>
        </HeroElement>
        <CardRowContainer>
          <Card>
            <CardTitle>More Information</CardTitle>
            <CardText>
              Get more information on your favorite Pokemon here
            </CardText>
            <ButtonContainer>
              <Icon></Icon>
            </ButtonContainer>
          </Card>
          <Card>
            <CardTitle>Team Leader Boards</CardTitle>
            <CardText>
              Check out the top Pokemon Go and Pokemon TCG players from around
              the world
            </CardText>
            <ButtonContainer>
              <Icon></Icon>
            </ButtonContainer>
          </Card>
          <Card>
            <CardTitle>TCG Catalog</CardTitle>
            <CardText>
              Request an exclusive catalog of limited edition and rare cards
              only available through The Pokemon Company!
            </CardText>
            <ButtonContainer>
              <Icon></Icon>
            </ButtonContainer>
          </Card>
        </CardRowContainer>
      </Container>
    </ContentContainer>
  );
}

const ContentContainer = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  * {
    box-sizing: border-box;
  }
`;

const HeroElement = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 400px;
  background: url(https://cdn5.qutee.com/wp-content/uploads/2016/06/heroUpload_433864841.jpg)
    0% 0% / cover no-repeat;
  background-repeat: no-repeat;
`;

const HeroTitle = styled.h1`
  font-size: 48px;
  font-weight: 400;
  margin: 48px auto 17px;
  color: white;
  display: block;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  text-align: center;
`;

const HeroText = styled.div`
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  margin: 0px auto auto;
  color: white;
  width: 400px;
  display: block;
`;

const CardRowContainer = styled.div`
  display: flex;
  margin: -128px auto 22px;
  columns: auto 3;
  column-gap: 20px;
  padding: 0px 20px;
`;

const Card = styled.div`
  background: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 3px;
  cursor: pointer;
  margin: 0px 0px 20px;
  border-left: 4px solid rgb(217, 90, 90);
  padding: 20px 20px 15px;
  box-shadow: rgb(52 62 71 / 12%) 0px 3px 5px;
`;

const CardTitle = styled.div`
  font-size: 18px;
  margin: 0px auto 8px 0px;
`;

const CardText = styled.div`
  font-size: 14px;
  line-height: 20px;
  margin: 0px auto 8px 0px;
`;

const ButtonContainer = styled.div`
  border-radius: 100%;
  background-color: rgb(217, 90, 90);
  width: 40px;
  height: 40px;
  margin: auto auto 0px 0px;
`;

const Icon = styled.i`
  display: inline-block;
  margin: 12.5px 12.5px;
  font-size: 12px;
  width: 0.8rem;
  right: 0.8rem;
  height: 0.8rem;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
  ::after {
    content: "";
    position: absolute;
    border-top: 2px solid white;
    top: 2px;
    right: -7px;
    width: 14px;
    height: 14px;
    transform: rotate(-45deg);
  }
`;

导入“/styles.css”； 从“样式化组件”导入样式化； 导出默认函数App（）{ 返回( 现代竞技游戏，怀旧的过去 交易者和收藏者的想法。 同一天，你也可以坐在我身边 查梅利恩，火焰喷射器Staryu Nidoqueen Pallet Town Breloom Forretress Weepinbell.沙击灭肖Slugma熟化Luxio 愤怒的杰西。草之字形河马在拉伯尔马格比 杰西口袋妖怪英雄。西风徽章斯塔维娅·希特蒙托普·夏皮多 皮吉奥托·维尼佩德·戈希泰尔。联队进攻格托里塔 Zoroark Venusaur闹鬼怀疑论者皮卡丘卡斯康旋转木马 克罗斯特。 更多信息 获取更多关于你最喜欢的口袋妖怪的信息 团队领导委员会 看看世界各地顶尖的口袋妖怪围棋和口袋妖怪TCG玩家 世界 TCG目录 申请限量版和稀有卡的独家目录 只可通过口袋妖怪公司购买！ ); } const ContentContainer=styled.div` 显示器：flex； 弯曲方向：立柱； 宽度：100%； 身高：100%； `; const Container=styled.div` 显示器：flex； 弯曲方向：立柱； 宽度：100%； 身高：100%； 字体系列：“IBM Plex Sans”、“Helvetica Neue”、Arial、无衬线字体； * { 框大小：边框框； } `; 常量元素=styled.div` 显示器：flex； 弯曲方向：立柱； 宽度：100%； 高度：400px； 背景：url(https://cdn5.qutee.com/wp-content/uploads/2016/06/heroUpload_433864841.jpg) 0%0%/覆盖范围不重复； 背景重复：无重复； `; const herottitle=styled.h1` 字体大小：48px； 字体大小：400； 利润率：48px自动17px； 颜色：白色； 显示：块； 边距块开始：0.67em； 边缘块端：0.67em； 边距内联开始：0px； 边距内联端：0px； 文本对齐：居中； `; const HeroText=styled.div` 字体大小：13px； 字号：500； 线高：20px； 保证金：0px自动； 颜色：白色； 宽度：400px； 显示：块； `; const CardRowContainer=styled.div` 显示器：flex； 利润率：-128px自动22px； 列：自动3； 柱间距：20px； 填充：0px 20px； `; const Card=styled.div` 背景：白色； 宽度：100%； 显示器：flex； 弯曲方向：立柱； 边界半径：3px； 光标：指针； 利润率：0px 0px 20px； 左边框：4倍实心rgb（217,90,90）； 填充：20px 20px 15px； 盒影：rgb（52 62 71/12%）0px 3px 5px； `; const CardTitle=styled.div` 字号：18px； 保证金：0px自动8px 0px； `; const CardText=styled.div` 字体大小：14px； 线高：20px； 保证金：0px自动8px 0px； `; const ButtonContainer=styled.div` 边界半径：100%； 背景色：rgb（217,90,90）； 宽度：40px； 高度：40px； 保证金：自动0px 0px； `; const Icon=styled.i` 显示：内联块； 保证金：12.5px12.5px； 字体大小：12px； 宽度：0.8rem； 右：0.8雷姆； 高度：0.8雷姆； 边框顶部：2件纯白； 右边框：2倍纯白； 变换：旋转（45度）； ：：之后{ 内容：“； 位置：绝对位置； 边框顶部：2件纯白； 顶部：2个； 右：-7px； 宽度：14px； 高度：14px； 变换：旋转（-45度）； } `; 编辑 在测试删除负边距属性并添加

位置：relative

后，我失去了底部卡片行所需的覆盖效果：

---

调试代码时，我发现这些卡的边距属性为负

正如你所看到的结构

卡片包装器被移动到动态描述被附加的位置

样式：添加

位置：相对并删除
边距：-（值）到同一元素

---

希望这有帮助。

我知道，这不是最漂亮的，但我用它来创造叠加效果哈哈。虽然

position:relative

可以解决这个问题，但它也完全删除了覆盖。你能更新codesandbox并显示你看到的吗？Yeup刚刚用Change的输出更新了原始问题我调试过并要求你做的相同事情你可以看到我在那里共享的图像是DH（动态标题）部分，就在你的C（卡）部分下面。哦，等等，我明白了！因此，将这两个变化结合在一起就可以了！