Javascript HTML范围输入在尝试移动时没有响应

当我试着把拇指移过轨道时，什么也没发生。在我将

img

添加到

滑块cntnr

div

中后，它停止工作

HTML JS

---

将

边距顶部添加到滑块输入。当前，鼠标抓取的是图像，而不是滑块位。
添加以下CSS将使其正常工作

#slider-cntnr input{
  position:relative;
}

我还添加了以下内容，因为不小心拖动图像可能会很烦人

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

请参见
我相信您无法拖动，因为#slider follow cntnr位于它的顶部，因为它位于相对位置，而输入则不是。相对定位图元时，其Y位置位于静态定位图元的顶部。由于现在输入的位置过于相对，z指数相同为0，因此它们按照出现顺序确定谁在谁之上。
var follower = document.getElementById('slider-follow');
var follower_val = document.getElementById('slider-val');
var slider = document.getElementById('frame-slider');

var updateFollowerValue = function(val) {
  follower_val.innerHTML = val;
  follower.style.left = (val*1) + '%';
};

updateFollowerValue(slider.value);

#slider-cntnr input{
  position:relative;
}

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}