在滚动导航栏上，插入符号向下覆盖图标

Question

选择列表项时，caret符号切换为面朝下的caret-down当我滚动列表时，插入符号向下图标与导航栏重叠。

向上插入符号工作良好，但为什么向下插入符号会重叠？

请帮我解决

$('.log-info li').prepend($('<span>&nbsp;</span>').addClass('caret'))
$(document).on('click', '.log-info li', function(event) {
let getdash1 = document.querySelectorAll('.log-info') 
getdash1.forEach(function(o) {
if($(o).hasClass("log-select")){
$(o).removeClass("log-select")
}
})
$(this).addClass("log-select");
})
$('.caret,.log-info li').on('click', function(e) {
$('.caret,.log-info li').toggleClass('caret-down');

})

.nav-tabs{
position: fixed;
}
.log-pagerow
{
justify-content: center;
height: 80%;
}
.Log-container
{
height: 100%;
border-radius: 10px;
background-color: white;
overflow:scroll;
position: relative;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
}
#log-menu{
margin-top: 50px;
}
.whole-log-container
{
margin-top: 3%;
height: 80%;
}
ul li {
list-style-type: none;
}
.caret {
cursor: pointer;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}

.caret::before {
content: "25B6";
color: #8F9779;
display: inline-block;
margin-right: 6px;
font-size: 20px;
}
.caret-down::before {
display: inline-block;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */
transform: rotate(90deg);  
}
.log-select{
color: white;
background-color: #28be9a;
padding: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"  crossorigin="anonymous">
<div class="container-fluid whole-log-container">
<div class="row log-pagerow">
<div class="col-sm-8 Log-container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#summary-log" class="nav-link active" data-toggle="tab">Summary</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="summary-log">
<ul class="log-info" id="log-menu">
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
</ul>
</div>
</div>
</div>
</div>

Answer 1

将z索引添加到nav-tabs

.nav-tabs{
z-index:9;
}

$('.log-info li').prepend($('<span>&nbsp;</span>').addClass('caret'))
$(document).on('click', '.log-info li', function(event) {
let getdash1 = document.querySelectorAll('.log-info') 
getdash1.forEach(function(o) {
if($(o).hasClass("log-select")){
$(o).removeClass("log-select")
}
})
$(this).addClass("log-select");
})
$('.caret,.log-info li').on('click', function(e) {
$('.caret,.log-info li').toggleClass('caret-down');

})

.nav-tabs{
position: fixed;
z-index:99;
}
.log-pagerow
{
justify-content: center;
height: 80%;
}
.Log-container
{
height: 100%;
border-radius: 10px;
background-color: white;
overflow:scroll;
position: relative;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
}
#log-menu{
margin-top: 50px;
}
.whole-log-container
{
margin-top: 3%;
height: 80%;
}
ul li {
list-style-type: none;
}
.caret {
cursor: pointer;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}

.caret::before {
content: "25B6";
color: #8F9779;
display: inline-block;
margin-right: 6px;
font-size: 20px;
}
.caret-down::before {
display: inline-block;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */
transform: rotate(90deg);  
}
.log-select{
color: white;
background-color: #28be9a;
padding: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"  crossorigin="anonymous">
<div class="container-fluid whole-log-container">
<div class="row log-pagerow">
<div class="col-sm-8 Log-container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#summary-log" class="nav-link active" data-toggle="tab">Summary</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="summary-log">
<ul class="log-info" id="log-menu">
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
<li>data</li>
</ul>
</div>
</div>
</div>
</div>