Установка максимальной высоты влияет на z-index

Question

Итак, я хочу, чтобы div «content» появлялся поверх div «cover», который нормально работает, но как только я установил max-height для div «content», он не может этого сделать.

Минимально воспроизводимый здесь . Вы можете увидеть, если вы удалите строку 66 из CSS, она будет вести себя как ожидалось, но каким-то образом будет работать со строкой 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 не зависит от размеров элемента. Вместо этого основной проблемой является переключение слоев дочерних элементов, которое должно происходить при наведении на родительские элементы.

Чтобы выполнить sh, вам необходимо убедиться, что все слои (обозначенные элементами с отличающимися z-index являются братьями и сестрами. Это позволяет менять визуально их порядок.

Основные изменения необходимо сделать это:

1. Переместить .cover, .card и .content, чтобы они были прямыми потомками .card-container и братьев и сестер по отношению друг к другу.
2. Убедитесь, что z- Индекс для .content, .card и .cover находится в порядке возрастания, когда .card-container не наведен, а затем в порядке убывания при наведении.
3. Ограничьте transitions указанием c свойств вместо "all" «для более точного управления преобразованиями.

Answer 2

измените max-width:250px; и max-height:175px, чтобы содержимое помещалось в «текстовом» разделе.

, после этого добавьте полосу прокрутки, чтобы дать пользователю подсказку для прокрутки вниз.