为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

宝慕林4294392 2024-01-22 20:58:32
所以我希望“内容”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;}
查看完整描述

2 回答

?
慕桂英546537

TA贡献1848条经验 获得超10个赞

问题不在于影响 的高度z-indexz-index不受元素尺寸的影响。相反,主要问题是子元素的切换分层需要在父元素悬停时发生。

为了实现这一点,您需要确保所有层(如具有不同的元素所指示的那样)z-index是同级的。这允许您在视觉上交换它们的顺序。

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

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

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

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


查看完整回答
反对 回复 2024-01-22
?
ibeautiful

TA贡献1993条经验 获得超5个赞

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

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


查看完整回答
反对 回复 2024-01-22
  • 2 回答
  • 0 关注
  • 59 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信