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

所以我希望“内容”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;

}



宝慕林4294392
浏览 119回答 2
2回答

慕桂英546537

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

ibeautiful

更改max-width:250px;并使max-height:175px内容适合“文本”div。之后添加一个滚动条以提示用户向下滚动。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5