Question

因此，我希望“内容” div出现在“覆盖” div上，该div正常工作，但是一旦我为“内容” div设置了最大高度，它就不会这样做。

Minimum reproducible here。您可以看到是否删除了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;
}

.cover:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-top: 100px solid #cc99ff;
    border-bottom: 100px solid transparent;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 20;
    transform-origin: top;
    transform: rotateX(0deg);
    transition: all 1s 1s ease;
}

.content {
    background-color: yellow;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 10px;
    width: 280px;
    height: 180px;
    border-radius: 20px;
    transition: all 1s ease;
}

.content p {
    position: relative;
}

.card:hover .cover:before {
    transform: rotateX(180deg);
    transition: all 1s ease;
}

.card:hover .content {
    top: -80px;
    transition: all 1s 1s ease;
}

/*Actual text stuff*/
.text {
    position: absolute;
    opacity: 1;
    left: 5px;
    max-width: 100px;
    max-height: 200px; /* This line causes the problem */
    word-wrap: break-word;
    overflow-y: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.text::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE and Edge */
.text {
    -ms-overflow-style: none;
}

Answer 1

我认为您可能会选择this之类的东西。

简而言之，正如评论中所提到的，问题不是影响z-index的高度。 z-index不受元素尺寸的影响。相反，主要问题是需要在父元素悬停时发生子元素的切换分层。

要实现此目的，您需要确保所有层（由具有不同z-index的元素表示为同级。这使您可以直观地交换顺序）。

要做的主要更改：

移动.cover，.card和.content，使它们都是.card容器的直接子代和彼此的兄弟姐妹。
当未悬停.card-container时，确保.content，.card和.cover的z-index升序，然后在悬停时降序。
将transitions限制为特定属性，而不是“全部”限制以更精确地控制转换。

Answer 2

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

之后，添加滚动条，为用户提供向下滚动的提示。

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

2 个答案: