Flexbox结合相对/绝对定位布局问题：两行精灵球重叠求助

你的两行精灵球重叠，核心原因是所有内部图片用了position: absolute，导致容器.row-items失去了高度——absolute元素脱离文档流，容器没有内容撑起高度，所以两个.container-row都被压缩到最小高度，自然就重叠了。

修复步骤： #

1. 给.row-items设置宽高比例，让容器有固定尺寸
   因为精灵球是正方形，用aspect-ratio: 1/1可以让容器保持正方形，同时基于宽度自动计算高度，适配不同屏幕。
2. 调整内部元素的定位方式，用top代替margin-top，基于相对定位的容器做精准定位，避免布局混乱
3. 调整动画中的margin-top为top，保持动画逻辑不变

修改后的完整代码： #

CSS 部分 #

.main-container {
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    gap: 20px; /* 给两行之间加间距，可选 */
}

.container-row {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
}

.row-items {
    position: relative;
    width: 25%;
    aspect-ratio: 1/1; /* 关键：让容器保持正方形，自动生成高度 */
}

@keyframes pokeballBottomOpen {
    0% {top: 39%}
    100% {top: 76%}
}

@keyframes pokeballBottomClose {
    0% {top: 76%}
    100% {top: 39%}
}

@keyframes pokeballPokemonOpen {
    0% {top: 0%}
    100% {top: 20%}
}

@keyframes pokeballPokemonClose {
    0% {top: 20%}
    100% {top: 0%}
}

.animatePokeballBottomClose {
    animation: pokeballBottomClose;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.animatePokeballBottomOpen {
    animation: pokeballBottomOpen;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.animatePokeballPokemonOpen {
    animation: pokeballPokemonOpen;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.animatePokeballPokemonClose {
    animation: pokeballPokemonClose;
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.pkb-top {
    width: 100%;
    position: absolute;
    top: 0; /* 顶部对齐容器 */
    z-index: 1;
}

.pkb-bottom {
    width: 100%;
    position: absolute;
    top: 39%; /* 用top代替margin-top，基于容器定位 */
    z-index: 2;
}

.pokemon {
    width: 100%;
    padding: 10%;
    position: absolute;
    top: 0;
    z-index: 0;
}

HTML 和 JS 部分无需修改，保持原代码即可 #

额外说明： #

• aspect-ratio是现代浏览器支持的属性，如果要兼容旧浏览器，可以用padding-bottom: 100%代替（给.row-items加padding-bottom:100%，同时内部元素的position基于这个容器）
• 给.main-container加gap:20px可以让两行之间有间距，看起来更美观，可根据需求调整

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