设置最大高度会影响 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是同级的。这允许您在视觉上交换它们的顺序。

执行此操作所需的主要更改：

1. 移动 .cover、.card 和 .content，使它们都是 .card-container 的直接子级并且互为兄弟姐妹。

2. 确保 .content、.card 和 .cover 的 z-index 在 .card-container 未悬停时按升序排列，而在悬停时按降序排列。

3. 将您限制transitions为特定属性而不是“全部”，以更准确地控制变换。

Answer 2

更改max-width:250px;并使max-height:175px内容适合“文本”div。

之后添加一个滚动条以提示用户向下滚动。