Tips for correctly positioning CSS elements:

Question

Tips for correctly positioning CSS elements:

I am currently working on a slider using noUi Slider and aiming for an elegant solution. To accommodate the large size of the handle, I expanded the base UI with extra values which are not allowed, causing the handle to jump back to the permitted values. To address this issue, I added plus and minus buttons where the restricted values are located.

However, I am facing a problem where I can't make the control symbols (plus/minus) disappear behind the handle when it is moved over them. They remain visible on top, and I am struggling to find a solution to hide them behind the handle. Any help or advice on this matter would be greatly appreciated.

Below is the code I have implemented (styles can be found on 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/

jquery html css css-position z-index

Answer 1

Answer №1

Upon examining @zgood's latest fiddle, I deduced that the issue was not solely related to the z order anymore. It appeared that both the slider bar and the plus/minus elements were handling the events simultaneously, leading to conflicts. By rearranging the order of events so that the plus/minus elements received the event first and prevented it from reaching the bar, I managed to resolve most of the problems with just a simple modification to the mousedown event. Consequently, I could eliminate all the checks for values greater than 100 and less than 1000, as the bar started behaving correctly.

Another observation I made was that once the slider button reached 50/1050, it obscured the plus/minus buttons. To address this, I adjusted the z-index of the plus/minus elements to 13 instead of 3 in the fiddle. Whether z-index value of 3 or 13 is preferable is subjective, so feel free to experiment with both options and decide for yourself.

Visit the updated fiddle here

$(document).ready(function(){

    var sliders = document.getElementById('red'),
        input = document.getElementById('handle'),
        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));

    var c = $('#red > span').clone(true);
    $('#red > span').remove();
    $('.noUi-base').prepend(c);

    sliders.noUiSlider.on('update', function( values ) {
        var val = parseInt(values);
        termCur = val;
        $('.value', sliders).text(termCur + ' zł');
    });
    $('#slider-amount-plus').click(function(e){
        if(termCur < 1100) {
            termCur = termCur + 50;
            sliders.noUiSlider.set(termCur);
            $('.value', sliders).text(termCur + ' zł');
        }
       e.stopPropagation();
    }).mousedown(function(e){
       e.stopPropagation();
    });     
    $('#slider-amount-minus').click(function(e){ 
        if(termCur > 0) {
            termCur = termCur - 50;
            sliders.noUiSlider.set(termCur);
            $('.value', sliders).text(termCur + ' zł');
        }
    }).mousedown(function(e){
       e.stopPropagation();
    }); 

});

Answer 2

Upon examining @zgood's latest fiddle, I deduced that the issue was not solely related to the z order anymore. It appeared that both the slider bar and the plus/minus elements were handling the events simultaneously, leading to conflicts. By rearranging the order of events so that the plus/minus elements received the event first and prevented it from reaching the bar, I managed to resolve most of the problems with just a simple modification to the mousedown event. Consequently, I could eliminate all the checks for values greater than 100 and less than 1000, as the bar started behaving correctly.

Another observation I made was that once the slider button reached 50/1050, it obscured the plus/minus buttons. To address this, I adjusted the z-index of the plus/minus elements to 13 instead of 3 in the fiddle. Whether z-index value of 3 or 13 is preferable is subjective, so feel free to experiment with both options and decide for yourself.

Visit the updated fiddle here

$(document).ready(function(){

    var sliders = document.getElementById('red'),
        input = document.getElementById('handle'),
        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));

    var c = $('#red > span').clone(true);
    $('#red > span').remove();
    $('.noUi-base').prepend(c);

    sliders.noUiSlider.on('update', function( values ) {
        var val = parseInt(values);
        termCur = val;
        $('.value', sliders).text(termCur + ' zł');
    });
    $('#slider-amount-plus').click(function(e){
        if(termCur < 1100) {
            termCur = termCur + 50;
            sliders.noUiSlider.set(termCur);
            $('.value', sliders).text(termCur + ' zł');
        }
       e.stopPropagation();
    }).mousedown(function(e){
       e.stopPropagation();
    });     
    $('#slider-amount-minus').click(function(e){ 
        if(termCur > 0) {
            termCur = termCur - 50;
            sliders.noUiSlider.set(termCur);
            $('.value', sliders).text(termCur + ' zł');
        }
    }).mousedown(function(e){
       e.stopPropagation();
    }); 

});

Answer 3

Answer №2

Clusters of elements sharing a common ancestor that advance or retreat together in the stacking arrangement constitute what is referred to as a stacking context. An in-depth comprehension of stacking contexts is crucial for fully understanding how z-index and the stacking order function.

Each stacking context is anchored by a single HTML element acting as its fundamental component. Upon forming a new stacking context on an element, said stacking context restricts all its offspring elements to occupy a specific position within the stacking order. This implies that if an element resides in a stacking context at the bottom of the stacking order, it is impossible to have it appear ahead of another element situated in a distinct stacking context positioned higher in the stacking order, even with a z-index value exceeding a billion!

New stacking contexts can be established on an element through one of these methods:

When an element serves as the root node of a document (the element)

When an element possesses a positioning attribute other than static alongside a non-auto z-index value

When an element features an opacity value below 1

Besides opacity, numerous CSS properties introduce stacking contexts too. These encompass: transforms, filters, css-regions, paged media, and perhaps additional ones.

The following are the essential guidelines for determining stacking sequence within a singular stacking context (from rearward to forefront):

The root element of the stacking context
Positioned elements (and their descendants) possessing negative z-index values (higher values get piled upfront of lower values; components with identical values are stacked based on their occurrence in the HTML)
Non-positioned elements (arranged according to their appearance in the HTML)
Positioned elements (and their progeny) with a z-index value set as auto (organized by their visual presence in the HTML)
Positioned elements (and their descendants) featuring positive z-index values (higher values overshadows lower values; assets with the equivalent worth are assembled following their presentation in the HTML)

Note: Positioned elements with detrimental z-indexes are primarily sequenced within a stacking context, hence they end up stationed behind every other constituent. This situation enables an element to potentially materialize at the back of its parental figure, which typically isn't feasible. Such occurrence exclusively transpires if the parent entity of the element exists within the same stacking context and doesn't serve as the primary element in that regard.

I devised a "hackish" technique utilizing jQuery for achieving this task, you can explore the Fiddle by accessing this link. However, consider this approach provisional since I am currently refining the positioning procedure due to its reliance on fixed values. Additionally, I am investigating why the CSS behavior isn’t responsive and will disclose my findings here soon.

     $(document).mousemove(function (e) {
         var newpos = $(".noUi-handle").offset().left;

         if (newpos < 0) {
             $(".slider-minus").hide();
         } else { 
             $(".slider-minus").show();
         }

         if (newpos > 830) {
             $(".slider-plus").hide();  
         } else {  
             $(".slider-plus").show();
         }     
    });

update Here is an enhanced version, presently investigating the issue regarding the non-cooperative CSS behavior.

Answer 4

Clusters of elements sharing a common ancestor that advance or retreat together in the stacking arrangement constitute what is referred to as a stacking context. An in-depth comprehension of stacking contexts is crucial for fully understanding how z-index and the stacking order function.

Each stacking context is anchored by a single HTML element acting as its fundamental component. Upon forming a new stacking context on an element, said stacking context restricts all its offspring elements to occupy a specific position within the stacking order. This implies that if an element resides in a stacking context at the bottom of the stacking order, it is impossible to have it appear ahead of another element situated in a distinct stacking context positioned higher in the stacking order, even with a z-index value exceeding a billion!

New stacking contexts can be established on an element through one of these methods:

When an element serves as the root node of a document (the element)

When an element possesses a positioning attribute other than static alongside a non-auto z-index value

When an element features an opacity value below 1

Besides opacity, numerous CSS properties introduce stacking contexts too. These encompass: transforms, filters, css-regions, paged media, and perhaps additional ones.

The following are the essential guidelines for determining stacking sequence within a singular stacking context (from rearward to forefront):

The root element of the stacking context
Positioned elements (and their descendants) possessing negative z-index values (higher values get piled upfront of lower values; components with identical values are stacked based on their occurrence in the HTML)
Non-positioned elements (arranged according to their appearance in the HTML)
Positioned elements (and their progeny) with a z-index value set as auto (organized by their visual presence in the HTML)
Positioned elements (and their descendants) featuring positive z-index values (higher values overshadows lower values; assets with the equivalent worth are assembled following their presentation in the HTML)

Note: Positioned elements with detrimental z-indexes are primarily sequenced within a stacking context, hence they end up stationed behind every other constituent. This situation enables an element to potentially materialize at the back of its parental figure, which typically isn't feasible. Such occurrence exclusively transpires if the parent entity of the element exists within the same stacking context and doesn't serve as the primary element in that regard.

I devised a "hackish" technique utilizing jQuery for achieving this task, you can explore the Fiddle by accessing this link. However, consider this approach provisional since I am currently refining the positioning procedure due to its reliance on fixed values. Additionally, I am investigating why the CSS behavior isn’t responsive and will disclose my findings here soon.

     $(document).mousemove(function (e) {
         var newpos = $(".noUi-handle").offset().left;

         if (newpos < 0) {
             $(".slider-minus").hide();
         } else { 
             $(".slider-minus").show();
         }

         if (newpos > 830) {
             $(".slider-plus").hide();  
         } else {  
             $(".slider-plus").show();
         }     
    });

update Here is an enhanced version, presently investigating the issue regarding the non-cooperative CSS behavior.

Tips for correctly positioning CSS elements:

Answer №1

Answer №2

Similar questions

transforming JSON information into tables on a webpage

What is the best way to rearrange the order of navbar items when working with two nav bars and a single toggle in bootstrap 4?

Numerous textareas fail to function properly according to JQuery's standards

I encountered an issue while generating a crypto address on the Waves blockchain using the @waves/waves-crypto library in TypeScript

Transfer data in scripts to dynamically load Ajax pages

Ensure the menu bar remains at the top of the page without using the position:

Unable to modify jwplayer css styles to customize the chromecast icon

The CSS background-image and background-color do not load on IE8

Jquery experiencing compatibility issues with Internet Explorer

PHP - Implementing a Submit Button and Modal Pop-up AJAX across multiple browsers in PHP

What is the process for altering the initial day of the week in the full-calendar plugin within a Laravel application?

The textbox fails to update when the condition in the IF statement is met

Utilizing Python Selenium to Interact with Buttons

Validating Forms using JQuery

The most straightforward method for transforming a C# method into an asynchronous call for a Page/Web Method or jQuery

Use Onblur and Onfocus events in an input field that is read-only

Fullscreen images stop from getting stretched

Retrieve the values of the children within a div tag

"How can we pause the setInterval when the user hovers over the Ajax Quick Cart and resume it once

Is it possible for PHP to not provide an image to HTML?