my sftimeline dots having some high z-index value and on scrolling page it is overlapping my navbar which has an zindex of 1000, how to make sure sftimeline dots zindex is lower, please guide me thanks
<sftimeline cssclass="dot-color">
<timelineitems>
<timelineitem cssclass="@(statusClass)">
<content>
@status
</content>
</timelineitem>
@foreach (var item in etlLogs)
{
<timelineitem cssclass="@(item.ErrorFlag" ??="" false="" ?="" "error"="" :="" "state-progress")="">
<content>
@item.Description
</content>
<oppositecontent>
@item.CreatedDate
</oppositecontent>
</timelineitem>
}
<timelineitem cssclass="state-ideal">
<content>
Started
</content>
</timelineitem>
</timelineitems>
</sftimeline>
<style>
.e-dot{
z-index: -1 !important;
}
.state-ideal .e-dot {
background: #007bff;
// Example blue color for the "Started" state outline: 1px solid #007bff;
border-color: #007bff;
z-index: 99 !important;
}
.state-completed .e-dot {
background: #ff9900;
outline: 1px dashed #ff9900;
border-color: #ff9900;
z-index: 99 !important;
}
.state-progress .e-dot {
background: #33cc33;
outline: 1px dashed #33cc33;
border-color: #33cc33;
z-index: 99 !important;
}
.error .e-dot {
background: red;
// Red color for errors outline: 1px solid red;
border-color: red;
z-index: -1 !important;
}
.container {
height: 250px;
}
</style>
