如何修复 z-index 堆栈问题

.image-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;  
}

.background-img {
    width: 100vw;
    height: 100vh;
    background-size: 100%;
    z-index: 0;
}

.overlay-text {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3rem;
    font-weight: 900;
    text-shadow: 1px 1px 2px #000;
    border: 1px solid #FF5733;
    background-color: #FF5733;
    padding: 0 6rem;
    border-radius: 10px;
}

.sticky-notes {
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    padding: 20px;
    max-width: 1600px; /* Controls how wide the card row is */
    justify-content: center;
    cursor: pointer;
}
.card {
    width: 250px;
    height: 250px;
    color: white;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Arial', sans-serif;
    position: relative;
    z-index: 2; /* Ensures the card is above the background image */
}

.card::after{
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 14px; /* slightly more than the card to match the curve */
    background: red;
    z-index: -1; /* behind the card */
}
.appreciator, .text{
    font-weight: 400;
    font-size: 0.8rem;
    white-space: nowrap;      /* Prevents text from wrapping */
    overflow: hidden; 
}

.avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto;
}

.appreciate-text{
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    margin-top: 10px;
}


.icon-buttons {
    display: flex;
    justify-content: center;
    gap: 30px; /* space between like & comment icons */
    margin-top: 10px;
}


.navigation-buttons {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    transform: translateY(-50%);
    pointer-events: none; /* allows click-through by default */
}

.arrow-button {
    background-color: orangered;
    color: white;
    font-size: 2rem;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    pointer-events: auto; /* re-enables interaction on buttons */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.arrow-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

        <div class="image-wrapper">
                <img src={backgroundImageUrl} alt="background" class="background-img" />
                <div class="overlay-text">
                    <h1>WALL OF FAME</h1>
                </div>
                <div class="create-appreciation">
                        <lightning-button label="Create Appreciation" variant="brand" onclick={handleCreateAppreciation} class="create-button"></lightning-button>
                </div>    
        </div>

        <div class="navigation-buttons">
                <lightning-button-icon icon-name="utility:arrow_left" alternative-text="Delete" variant="bare-inverse" size="large"   class="arrow-button left-arrow"></lightning-button-icon>
                <lightning-button-icon icon-name="utility:arrow_right" alternative-text="Delete" variant="bare-inverse" size="large"   class="arrow-button left-arrow"></lightning-button-icon>
            </div>
        

        <div class="sticky-notes">
                <template for:each={appreciations} for:item="note">
                        <div key={note.Id} class="card" style={note.style}>
                                <div class="note-content">
                                        <h2 class="appreciator">{note.name}</h2>
                                        <div class="avatar">
                                                <img src="https://www.lightningdesignsystem.com/assets/images/avatar2.jpg" alt="avatar" />
                                            </div>
                                            <div class="text">is appreciated</div>
                                            <div class="appreciate-text">{note.appreciated}</div>        
                                </div>
                           <div>    <div class="icon-buttons">    
                                    <lightning-button-icon icon-name="utility:like" alternative-text="Delete" title="Delete" onclick={handleDelete} data-id={note.Id} class="delete-button"></lightning-button-icon>
                                    <lightning-button-icon icon-name="utility:comments" alternative-text="Delete" title="Delete" onclick={handleDelete} data-id={note.Id} class="delete-button"></lightning-button-icon>
                                        </div>  
                           </div>   
                        </div>
                </template>  
        </div>