组件（工具提示）优先于其他组件

Question

请注意，我正在使用 React。

我正在尝试向“.preview”组件添加一个工具提示，该组件基本上是一个带有字母的小框（小框代表一周中的几天，尽管这并不重要）。

工具提示按预期显示，但显示在页脚文本后面。

ClassCard.jsx

<div className={`card ${isCardOpen ? 'active' : ''}`} onClick={toggleCard}>
    <header className="card-header">
        <div className="image-container">
            <img src={card_image} alt="image" />
            <a className="card-number">{number}</a>
        </div>
    </header>
    { name ? <p className="card-name">{name}</p> : <p className="placeholder card-name">Undefined</p> }
    <div className="card-body">
        { teacher && (<p className="card-teacher">{teacher} { teacherOffice && `- (${teacherOffice})`}</p>)}
        { schedule && (<div className="schedule-container">
            <p className="card-schedule-title">Horaire:</p>
            <div className="card-schedule-preview">
                { Object.keys(schedule).map(day => (
                <div className={`preview ${isNull ? 'empty' : ''}`}>
                    <a>{button_text}</a>
                    {!isNull && <div className="tooltip preview-tooltip">
                        <span>Heure : {hover_text.time}</span>
                        <span>Local : {hover_text.local}</span>
                    </div>
                    }
                </div>
            </div>
        </div>) }
    </div>
    <div className="card-footer">
        <FontAwesomeIcon icon={faClock}></FontAwesomeIcon>
        <span className="card-footer-text">Prochain travail dû dans {workTime}</span>
    </div>
</div>

ClassCard.css

.card {
    position: relative;
    width: 300px;
    height: 167px;
    margin: 10px 10px 90px;
    background-color: white;
    border: 2px solid #f2f2f2;
    border-radius: 10px;
    transition: height 0.6s, width 0.6s, margin 0.6s;
}

.card-header {
    overflow: hidden;
    border-bottom: 2px solid #f2f2f2;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;

    & img {
        width: 100%;
        display: block;
        transition: transform 0.4s ease;
    }
}

.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.card-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 45px;
    font-family: 'Museo', sans-serif;
    font-weight: bold;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0 -4px 10px rgba(255,255,255,0.3);
    transition: 0.4s;
}

.card-name {
    text-align: center;
    display: block;
    font-size: 20px;
    font-family: 'Museo', sans-serif;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 7px 7px 18px;
}

.card-body {
    position: relative;
    opacity: 0;
    transform: translateX(-10px);
    transition: transform 0.2s, opacity 0.2s;
}

.card-teacher {
    padding-left: 10px;
    margin: 0;
    font-size: 15px;
    font-family: 'Museo', sans-serif;
}

.card-schedule-title {
    margin: 0;
    font-size: 15px;
    font-family: 'Museo', sans-serif;
}

.schedule-container {
    display: flex;
    margin: 10px 10px 22px;
    align-items: center;
}

.card-schedule-preview {
    display: flex;
}

.card-footer {
    position: absolute;
    display: flex;
    justify-content: center;
    font-size: 15px;
    font-family: 'Museo', sans-serif;
    transition: transform 0.6s;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.card-footer-text {
    margin: 0 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card:hover {
    height: 249px;
    width: 310px;
    margin: 5px 5px 10px;

    .card-number {
        font-size: 55px;
        text-shadow: 2px 7px 5px rgba(100,100,100,0.3), 0 -4px 10px rgba(255,255,255,0.3);
    }

    .card-header img {
        transform: scale(1.15);
    }

    .card-body {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.2s;
        transition: transform 0.4s, opacity 1s;
    }

}

.preview {
    position: relative;
    width: 18px;
    height: 18px;
    margin-left: 7px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    border: 2px solid #f2f2f2;
    font-family: 'Museo', sans-serif;
    transition: 0.3s;
}

.preview-tooltip span {
    display: block;
}

.preview.empty {
    background-color: #f2f2f2;
}

.preview:hover > .preview-tooltip {
    display: block;
}

.preview:not(.empty):hover {
    background-color: #08a45c;
    color: white;
}

.tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid #f2f2f2;
    border-radius: 10px;
    background-color: white;
    color: #5a616e;
    padding: 5px;
    width: auto;
    white-space: nowrap;
    box-shadow: 0 0 5px #f2f2f2;
    display: none;
    font-size: small;
    font-family: 'Museo', sans-serif;
}

这是因为

.cardfooter

的位置设置为“绝对”。将其位置设置为“静态”可以解决我的问题。但是，现在当我将鼠标悬停在卡片上时，组件（页脚）无法移动。我需要它是绝对的，这样我才能“转变”它。

我很乐意接受任何想法！预先感谢您！

Answer 1

在 .tooltip css 中添加 z-index

.tooltip{
   z-index: 999;
}