Отображение Div на вершине друг друга при прокрутке

Question

У меня есть фиксированная полоса вверху моей страницы, все работало нормально, пока я не добавил карты, при прокрутке не все отображается в верхней части заголовка, но карты появляются. Кто-нибудь знает, как это исправить?

https://imgur.com/a/KeavwrS

Это мои css и html для карт

@foreach (var item in Model.sessies) {

    <!-- Cards maken (probeersel) -->
    <div class="card" onclick="$('#div1').load('@Url.Action("Details", "Home", item)');  $('html, body').animate({
    scrollTop: $('#div1').offset().top}, 1000);">
        <!--<img src="img_avatar.png" alt="Avatar" style="width:100%">-->
        <div class="container">
            <h4><b>@item.Titel</b></h4>
            <p>Verantwoordelijke: @item.Verantwoordelijke</p>
            <p>Datum: @item.Start.ToString("dd-MM-yyyy")</p>
            <p>Startuur: @item.StartUur.ToString("HH:mm")</p>
            <p>Einduur: @item.EindUur.ToString("HH:mm")</p>
        </div>
    </div>
}

.card {
       box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
       transition: 0.3s;
       display: inline;
       width: 370px;
       height: 250px;
       margin: 5px;
       text-align: center;
       position: relative;
       float: left;
   }

       .card:hover {
           box-shadow: 0 8px 16px 0 #406e8e;
       }

   .container {
       padding: 2px 16px;
   }

   .card:nth-child(2n-1) {
       background-color: #f2f2f2;
   }

А это код для шапки

<header class="Header">
       <a asp-controller="Home" asp-action="Index">
           <img src="~/images/logo_stijl2.jpg" alt="ITLab-Logo" width="150" height="75">
       </a>
   </header>

.Header {
   background-color: #406e8e;
   position: sticky;
   top: 0;
   width: 100%;
   clear: both;
}

Answer 1

Попробуйте этот код:

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  display: inline-block;
  width: 370px;
  height: 250px;
  margin: 5px;
  text-align: center;
  position: relative;
}

.card:hover {
  box-shadow: 0 8px 16px 0 #406e8e;
}

.container {
  padding: 2px 16px;
}

.card:nth-child(2n-1) {
  background-color: #f2f2f2;
}
.Header {
  background-color: #406e8e;
  position: sticky;
  top: 0;
  width: 100%;
  clear: both;
  z-index: 999;
}

Answer 2

Это проблема z-index, чтобы решить ее, дайте меньший z-index элементу вашего заголовка.

.Header {
   background-color: #406e8e;
   position: sticky;
   top: 0;
   width: 100%;
   clear: both;
   z-index: 1010;
}

Создайте root своих карт и дайте z-index: 1011.

<div class="cards_container">ALL CARDS ARE HERE</div>

.cards_container {
    z-index: 1011;
}

Answer 3

Добавить z-индекс: 2; для класса вашего заголовка и ничего не меняйте для карточек.