点击轮播Next按钮时幻灯片堆叠显示的问题求助

问题原因 #

你的轮播幻灯片点击后显示在上一张下方，核心问题出在布局定位和样式选择器上：

• .slide 类使用了 inset: 0 但未设置 position: absolute，inset 属性仅对定位元素生效，导致幻灯片仍按文档流垂直排列，而非重叠在同一位置。
• 轮播列表的样式选择器错误：.carouselContainer>ul 是选择直接子元素，但你的 ul 嵌套在 .carouselSlides 容器内，这个选择器无法命中目标，列表默认的间距和样式未被清除。
• .slideTxt 高度设置为 500px，超过父元素 .slide 的高度，导致内容溢出，进一步打乱布局。

修复步骤 #

1. 给幻灯片添加绝对定位 #

让所有幻灯片重叠在容器的同一区域：

.slide {
    display: flex;
    width: 400px;
    height: 500px;
    justify-content: center;
    align-items: center;
    /* 添加绝对定位，使inset属性生效 */
    position: absolute;
    inset: 0;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
    transition-delay: 200ms;
    border-style: dashed;
    border-color: var(--magenta6);
}

2. 修正列表样式选择器 #

调整选择器路径，清除列表默认样式并设置定位参考：

.carouselContainer .carouselSlides ul {
    padding: 0;
    margin: 0;
    list-style: none;
    /* 设置相对定位，作为幻灯片绝对定位的父参考容器 */
    position: relative;
    width: 100%;
    height: 100%;
}

3. 调整内容高度避免溢出 #

修改 .slideTxt 的高度，防止超出父容器：

.slideContent .slideTxt {
    border: magenta;
    border-style: dashed;
    /* 改为自适应高度或合适的固定值 */
    height: auto;
    max-height: 200px;
}

效果验证 #

修改完成后，所有幻灯片会重叠在轮播列表容器内，点击切换按钮时，仅通过 opacity 和 z-index 控制显示/隐藏，不会再出现上下排列的错位问题。

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