Изображения перекрывают заголовок при наведении

Question

В моем веб-приложении для создания фотогалереи у меня есть панель навигации с фиксированным положением вверху страницы. Ниже приведена серия изображений. У меня проблема в том, что при наведении курсора на одно из изображений в верхней части страницы изображение перекрывает заголовок. Изображение ниже прояснит, в чем проблема:

Я попытался установить контейнер изображений и отдельные изображения на overflow: hidden;, но та же проблема сохраняется.

Вот это HTML:

 <ul class="container">
        <li class="item-list-container"><app-image-item
        *ngFor="let imageEl of images;"
        [image]="imageEl"
        (click)="onImageSelect(imageEl.id)"
        ></app-image-item>
        </li>
    </ul>

И CSS:

ul {
    margin:0;
    padding:0;
}

li {
    list-style: none;
    overflow: hidden;
}

.item-list-container {
    column-count: 4;
    column-gap: 1.1em;
    overflow: hidden;
    margin-top: 107px;

}

.container {
    overflow: hidden;
}

Answer 1

Используйте свойство z-index в CSS.

z-индекс элемента, над которым вы хотите быть выше, должен быть больше, чем z-индекс элемента, который вы хотите под ним.