我有一个mvc布局页面，_Layout.cshtml如下。我在页脚部分（_footer.cshtml）上有mediaelementjs播放列表，在布局的RenderBody（呈现Index.cshtml）中，它有自举卡，其中有一个乙烯基音乐播放器，其中包括播放列表和卡片，都是动态创建的。卡片的图像重叠在播放列表的顶部。使用侧导航栏的顶部菜单上的下拉通知列表也会出现相同的情况。侧导航栏重叠在顶部通知下拉列表的顶部，如下图所示。我该如何纠正？
Overlaps of controls in RenderBody on top of sections in _Layout
布局代码
<body>
<div class="page home-page">
<!-- Main Navbar-->
@*<header class="header">
</header>*@
<div class="page-content d-flex align-items-stretch">
<!-- Side Navbar -->
<nav id="sidebar" class="side-navbar">
<!-- Sidebar Header -->
<ul class="list-unstyled">
<li>
<a id="menu-toggle" class="btn">
<i class="fa fa-bars"></i>MusicCloud
</a>
</li>
<li> <a href="index.html"><i class="icon-home"></i>Home</a></li>
<li>
<a href="#dashvariants" aria-expanded="false" data-toggle="collapse"> <i class="icon-interface-windows"></i>Dropdown </a>
</li>
<li> <a href="tables.html"> <i class="icon-grid"></i>Tables </a></li>
<li> <a href="charts.html"> <i class="fa fa-bar-chart"></i>Charts </a></li>
<li> <a href="forms.html"> <i class="icon-padnote"></i>Forms </a></li>
<li> <a href="login.html"> <i class="icon-interface-windows"></i>Login Page</a></li>
</ul>
</nav>
<div class="content-inner">
<!-- Page Header-->
<header class="page-header">
<nav class="navbar">
<!-- Search Box-->
<div class="search-box">
<button class="dismiss"><i class="icon-close"></i></button>
<form id="searchForm" action="#" role="search">
<input type="search" placeholder="What are you looking for..." class="form-control">
</form>
</div>
<div class="container-fluid">
<div class="navbar-holder d-flex align-items-center justify-content-between">
<!-- Navbar Menu -->
<ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
<!-- Search-->
<li class="nav-item d-flex align-items-center"><a id="search" href="#"><i class="icon-search"></i></a></li>
<!-- Notifications-->
<li class="nav-item dropdown">
<a id="notifications" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link"><i class="fa fa-bell-o"></i><span class="badge bg-red">12</span></a>
<ul aria-labelledby="notifications" class="dropdown-menu">
<li>
<a rel="nofollow" href="#" class="dropdown-item">
<div class="notification">
<div class="notification-content"><i class="fa fa-envelope bg-green"></i>You have 6 new messages </div>
<div class="notification-time"><small>4 minutes ago</small></div>
</div>
</a>
</li>
<li>
<a rel="nofollow" href="#" class="dropdown-item">
<div class="notification">
<div class="notification-content"><i class="fa fa-twitter bg-blue"></i>You have 2 followers</div>
<div class="notification-time"><small>4 minutes ago</small></div>
</div>
</a>
</li>
<li>
<a rel="nofollow" href="#" class="dropdown-item">
<div class="notification">
<div class="notification-content"><i class="fa fa-upload bg-orange"></i>Server Rebooted</div>
<div class="notification-time"><small>4 minutes ago</small></div>
</div>
</a>
</li>
<li>
<a rel="nofollow" href="#" class="dropdown-item">
<div class="notification">
<div class="notification-content"><i class="fa fa-twitter bg-blue"></i>You have 2 followers</div>
<div class="notification-time"><small>10 minutes ago</small></div>
</div>
</a>
</li>
<li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center"> <strong>view all notifications </strong></a></li>
</ul>
</li>
<!-- Messages -->
<li class="nav-item dropdown">
<a id="messages" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link"><i class="fa fa-envelope-o"></i><span class="badge bg-orange">10</span></a>
<ul aria-labelledby="notifications" class="dropdown-menu">
<li>
<a rel="nofollow" href="#" class="dropdown-item d-flex">
<div class="msg-profile"> <img src="~/Content/Template/img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle"></div>
<div class="msg-body">
<h3 class="h5">Jason Doe</h3><span>Sent You Message</span>
</div>
</a>
</li>
<li>
<a rel="nofollow" href="#" class="dropdown-item d-flex">
<div class="msg-profile"> <img src="~/Content/Template/img/avatar-2.jpg" alt="..." class="img-fluid rounded-circle"></div>
<div class="msg-body">
<h3 class="h5">Frank Williams</h3><span>Sent You Message</span>
</div>
</a>
</li>
<li>
<a rel="nofollow" href="#" class="dropdown-item d-flex">
<div class="msg-profile"> <img src="~/Content/Template/img/avatar-3.jpg" alt="..." class="img-fluid rounded-circle"></div>
<div class="msg-body">
<h3 class="h5">Ashley Wood</h3><span>Sent You Message</span>
</div>
</a>
</li>
<li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center"> <strong>Read all messages </strong></a></li>
</ul>
</li>
<!-- Logout -->
<li class="nav-item"><a href="login.html" class="nav-link logout">Logout<i class="fa fa-sign-out"></i></a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<!-- Ticker-->
@Html.Partial("_TopNav")
</div>
</header>
<!-- Dashboard Counts Section-->
<section class="dashboard-counts no-padding-bottom">
<div class="container-fluid">
<div class="row bg-white has-shadow">
<!-- Item -->
@RenderBody()
</div>
</div>
</section>
<!-- Dashboard Header Section -->
<!-- Feeds Section-->
<!-- Updates Section -->
<!-- Page Footer-->
<footer class="sticky-footer">
@*<div class="container-fluid">
<div class="row">*@
@Html.Partial("_fullPlayer")
@*</div>
</div>*@
</footer>
</div>
<div class="clear"></div>
</div>
</div>
<div id="modPlayList" class="modcon" style="width: 20%;height:20%"></div>
@Scripts.Render("~/bundles/jquery")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/mediaelement")
@Scripts.Render("~/bundles/modules")
@RenderSection("scripts", false)
</body>