I'm currently working on implementing a progress bar handle for my website. While the progress bar functions perfectly, I'm encountering an issue where the handle gets cut off when placed above the bar. Please refer to the attached image for reference. Below is the CSS code I am using:
CSS:
.mejs-controls .mejs-time-rail .mejs-time-handle {
position: absolute;
display: block;
width: 14px;
height: 14px;
margin-top: -5px;
z-index: 1;
background: url(../img/sprite.png) 0 -394px;
}
HTML (Image provided as this appears to be a CSS-related issue):
Upon implementation, the progress bar handle looks like this on my page:
If anyone could provide some insight into what might be causing this issue, I would greatly appreciate it. I believe I am close to resolving it but could use some guidance. Thank you!