时间戳

首页 > 解决方案 > Div 在滚动时显示在彼此之上

html - Div 在滚动时显示在彼此之上

问题描述

我的页面顶部有一个固定栏，在我添加卡片之前一切正常，滚动时所有内容都没有出现在标题顶部，但卡片确实出现了。有谁知道如何解决这个问题？

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;
}

标签： htmlcss

解决方案

添加 z-index:2; 对于您的标题类，不要更改卡片的任何内容。

推荐阅读