如何正确定位css元素？

Question

我正在做一个基于noUi Slider的滑块.试图实现如此说"优雅"的解决方案.因为我的ui手柄很大,所以我的ui底座略大,底座有额外的值.但是这些值是不允许的,句柄会跳回到允许的值.我决定将加号和减号按钮放在限制值的位置.

但问题是我无法达到这样的效果:当你将控制符号移动到控制符号(正/负)时,它们会隐藏在句柄后面.就我而言,他们仍处于领先地位.我无法解决这个问题.

一些帮助/建议会很棒.

这是我的代码(样式在JSFiddle上):

$(document).ready(function(){

    var sliders = document.getElementById('red'),
        input = document.getElementById('handle'),
        sliderPlus = document.getElementById('slider-amount-plus'),
        sliderMinus = document.getElementById('slider-amount-minus'),
        termCur = 500;

    noUiSlider.create(sliders, {
        start: termCur,
        step: 50,
        connect: "lower",
        range: {
            'min': 0,
            'max': 1100
        },
        pips: {
            mode: 'values',
            values: [100, 500, 1000],
            density: 4.5
        }
    });
    $('<div class="value">' + termCur + ' z?' + '</div>').appendTo($('.noUi-handle', sliders));


sliders.noUiSlider.on('change', function ( values, handle ) {
    if ( values[handle] < 100 ) {
        sliders.noUiSlider.set(100);
    } else if ( values[handle] > 1000 ) {
        sliders.noUiSlider.set(1000);
    }
});
sliders.noUiSlider.on('update', function( values ) {
    termCur = values;
    if( termCur >= 100 && termCur <= 1000 ) {
    $('.value', sliders).text(parseInt(termCur) + ' z?');}
});
sliderPlus.addEventListener('click', function(){
    if(termCur < 1000) {
        var setValue = parseInt(termCur) + 50;
        sliders.noUiSlider.set(setValue);
    }
}); 
sliderMinus.addEventListener('click', function(){
    if(termCur > 100) {
        var setValue = parseInt(termCur) - 50;
        sliders.noUiSlider.set(setValue);
    }
}); 

<div class="sliders" id="red">
        <a class="controls-symbols slider-minus" id="slider-amount-minus"><i class="fa fa-minus"></i></a>
        <a class="controls-symbols slider-plus" id="slider-amount-plus"><i class="fa fa-plus"></i></a>
    </div>

https://jsfiddle.net/o7Ly845j/

Answer 1

所以，拿最后一个@zgood小提琴来说，我猜问题不再是z顺序了，这是因为滑块和加/减元素都在获取事件，并且当加/减元素出现时， events 抓住了它，滑块已经在 1100 或 0 处。所以我改变了事件，这样加号/减号首先得到了事件并阻止它进入栏。我真的只需要停止鼠标按下，大多数问题就可以自行解决。之后，我可以取出所有 > 100 和 < 1000 的支票，因为酒吧会自行表现。

\n\n

我还注意到，一旦达到 50/1050，滑块按钮就会覆盖加号/减号。所以我将小提琴中的加号/减号更改为 z-index:13 而不是 3。我不确定哪个更好，所以尝试 3 和 13，然后做出你自己的决定。

\n\n

https://jsfiddle.net/guyschalnat/radpjf47/2/

\n\n

$(document).ready(function(){\n\n    var sliders = document.getElementById(\'red\'),\n        input = document.getElementById(\'handle\'),\n        termCur = 500;\n\n    noUiSlider.create(sliders, {\n        start: termCur,\n        step: 50,\n        connect: "lower",\n        range: {\n            \'min\': 0,\n            \'max\': 1100\n        },\n        pips: {\n            mode: \'values\',\n            values: [100, 500, 1000],\n            density: 4.5\n        }\n    });\n    $(\'<div class="value">\' + termCur + \' z\xc5\x82\' + \'</div>\').appendTo($(\'.noUi-handle\', sliders));\n\n    var c = $(\'#red > span\').clone(true);\n    $(\'#red > span\').remove();\n    $(\'.noUi-base\').prepend(c);\n\n    sliders.noUiSlider.on(\'update\', function( values ) {\n        var val = parseInt(values);\n        termCur = val;\n        $(\'.value\', sliders).text(termCur + \' z\xc5\x82\');\n    });\n    $(\'#slider-amount-plus\').click(function(e){\n        if(termCur < 1100) {\n            termCur = termCur + 50;\n            sliders.noUiSlider.set(termCur);\n            $(\'.value\', sliders).text(termCur + \' z\xc5\x82\');\n        }\n       e.stopPropagation();\n    }).mousedown(function(e){\n       e.stopPropagation();\n    });     \n    $(\'#slider-amount-minus\').click(function(e){ \n        if(termCur > 0) {\n            termCur = termCur - 50;\n            sliders.noUiSlider.set(termCur);\n            $(\'.value\', sliders).text(termCur + \' z\xc5\x82\');\n        }\n    }).mousedown(function(e){\n       e.stopPropagation();\n    }); \n\n});\n

\n