вход ползунка перекрывает заголовок

Question

У меня есть div, который содержит список, где каждый элемент списка имеет ползунок. Прямо над ним находится фиксированный заголовок с полной непрозрачностью. Когда я прокручиваю вниз, все нормально, за исключением того, что ползунок виден полностью над заголовком. Фактический аспект html кажется очень простым, и я не могу найти никаких проблем с ним, но я предполагаю, что проблема заключается в дизайне WebKit, с которым я не слишком знаком.

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 25%;
  float: left;
  margin-top: 60px;
}


/* List Elements */

.slidecontainer {
  display: block;
  color: #000;
  padding: 40% 5%;
  text-decoration: none;
  width: 90%;
  display: inline-flex;
  flex-direction: column;
  min-height: 75px;
  background: #e9e9e9;
  border-color: #e1e1e1;
  border-style: solid;
  border-width: 3px 0px;
}

header {
  font-size: 30px;
  text-align: center;
  background-color: #37393d;
  padding: 15px;
  color: white;
  position: fixed;
  width: 100%;
}


/* SLIDER*/

.slider {
  margin: 8% 12.5%;
  -webkit-appearance: none;
  width: 75%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #155724;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

<div class="sourcesContainer">
  <ul>
    <li class="slidecontainer">
      <input type="range" min="0" max="100" value="0" class="slider">
    </li>
    <li class="slidecontainer">
      <input type="range" min="0" max="100" value="0" class="slider">
    </li>
    <li class="slidecontainer">
      <input type="range" min="0" max="100" value="0" class="slider">
    </li>
    <li class="slidecontainer">
      <input type="range" min="0" max="100" value="0" class="slider">
    </li>
  </ul>
</div>

Answer 1

Если я правильно понимаю ваш вопрос, у вас есть пробел над ползунками.
То есть ul поле, удалите его ul { margin-top: 0 }