设置最大高度会影响 z-index

Question

所以我希望“内容”div 出现在“封面”div 上，这通常工作正常，但是一旦我设置“内容”div 的最大高度，它就无法执行此操作。

此处可重现的最低限度。您可以看到，如果删除 CSS 的第 66 行，它会按预期运行，但会以某种方式与第 66 行一起运行。

帮助表示赞赏！谢谢。

如果有人想知道，请附上代码： HTML：

<div class = "wrapper">

            <div class="card-container">

                <div class="card">

                    <div class="cover"></div>

                    <div class="content">

                        <div class="text">

                            <p>this is a long-ass line that is supposed to cause overflow</p>

                            <p>this is a long-ass line that is supposed to cause overflow</p>

                            <p>this is a long-ass line that is supposed to cause overflow</p>

                            <p>this is a long-ass line that is supposed to cause overflow</p>

                            <p>this is a long-ass line that is supposed to cause overflow</p>

                            <p>this is a long-ass line that is supposed to cause overflow</p>

                            <p>this is a long-ass line that is supposed to cause overflow</p>

                            <p>this is a long-ass line that is supposed to cause overflow</p>

                            <p>this is a long-ass line that is supposed to cause overflow</p>

                            <p>this is a long-ass line that is supposed to cause overflow</p>

                            <p>this is a long-ass line that is supposed to cause overflow</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

CSS：

.card-container {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

.card {

    width: 300px;

    height: 200px;

    background-color: #d9b3ff;

    position: relative;

    transform-style: preserve-3d;

    cursor: pointer;

}

Answer 1

问题不在于影响 的高度z-index。z-index不受元素尺寸的影响。相反，主要问题是子元素的切换分层需要在父元素悬停时发生。为了实现这一点，您需要确保所有层（如具有不同的元素所指示的那样）z-index是同级的。这允许您在视觉上交换它们的顺序。执行此操作所需的主要更改：移动 .cover、.card 和 .content，使它们都是 .card-container 的直接子级并且互为兄弟姐妹。确保 .content、.card 和 .cover 的 z-index 在 .card-container 未悬停时按升序排列，而在悬停时按降序排列。将您限制transitions为特定属性而不是“全部”，以更准确地控制变换。

Answer 2

更改max-width:250px;并使max-height:175px内容适合“文本”div。之后添加一个滚动条以提示用户向下滚动。