Bonjour à tous déjà désolé pour les fautes d'orthographe je viens vers vous comme dit dans le titre même s'il n'est pas très explicite de mettre un élément au-dessus des autres voilà j'ai commencé à le faire de mon côté et le résultat est celui-là

image 1:

image 2 : 

comme vu sur les images tout devrait fonctionner parfaitement mais là subtilité c'est que j'ai créé ça en faisant des display none sur du CSS via le JS

si je répète le slider x fois il va avoir un problème car je devrais faire en sorte de supprimer tous les autres sliders pour ne pas les voir

je viens vers vous car il y aurait pas un moyen plus simple de mettre en premier place le slider où plus simplement le container ou le slider se trouve et que tous les éléments de ma page disparaissent pour que finalement juste le slider soit au milieu de l'écran et proprement

voilà le code détaillé de comment je me suis pris pour les petits curieux pas obliger de le lire

le slider en 3 etape : 

html :

<div class="containerslider">


        <div class="container">
            <div class="slider slider--tokyo">
                <div class="slider__before"></div>
                <div class="slider__separator"></div>
                <div class="slider__after"></div>
                <input class="slider__range" type="range" min="0" max="100" value="50" />
            </div>
        </div>
        <input type="checkbox" id="chekbox">
    </div>

css:

.containerslider {
    display: flex;
    border: 2px solid black;
    max-width: 20%;
}

.containerslider.active {
    display: flex;
    border: 2px solid black;
    max-width: 100%;

}




.container {
    width: 1024px;
    max-width: 100%;
    margin: 0 auto;
}

.slider {
    position: relative;
    height: 0;
    padding-bottom: 66.666666667%;
    margin-top: 24px;
    margin-bottom: 24px;
}

.slider__after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url("image/image_bio.jpg");
    background-size: cover;
    pointer-events: none;
}

.slider__before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 50%;
    height: 100%;
    background-image: url("image/img_parallax.jpg");
    background-size: cover;
    pointer-events: none;
    overflow: hidden;
}

.slider__before:before {
    content: 'Avant';
    position: absolute;
    left: 8px;
    top: 8px;
}

.slider__after:before {
    content: 'Après';
    position: absolute;
    right: 8px;
    top: 8px;
}

.slider__separator {
    position: absolute;
    left: 50%;
    width: 2px;
    top: 0;
    bottom: 0;
    background: rgb(255, 255, 255, 0.7);
    box-shadow: 0 5px 10px 0 rgb(0, 0, 0, 0.5);
    cursor: ew-resize;
    z-index: 3;
    transform: translateX(-50%);
}

.slider--tokyo .slider__separator:before {
    content: '';
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: white solid 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slider__range::-moz-slider-thumb {
    width: 12px;
    height: 16px;
    background: white;
}

.slider--tokyo .slider__range {
    display: none;
}

.slider--tokyo .slider__before:before,
.slider--tokyo .slider__after:before {
    top: 50%;
    transform: translateY(-50%);
    background: rgb(255, 0, 0, 0.5);
    padding: 8px 16px;
    border-radius: 8px;
    margin-left: 8px;
    margin-right: 8px;
}

et le js: 

let sliders = document.querySelectorAll('.slider');

sliders.forEach(function (slider) {
    let sliderRange = slider.querySelector('.slider__range');
    let sliderBefore = slider.querySelector('.slider__before');
    let sliderSeparator = slider.querySelector('.slider__separator');

    function updateSliderPosition() {
        sliderBefore.style = `width:${sliderRange.value}%`;
        sliderSeparator.style = `left:${sliderRange.value}%`;
    }

    sliderRange.addEventListener('input', updateSliderPosition);

    let isDragging = false;

    sliderSeparator.addEventListener('mousedown', function () {
        isDragging = true;
    });

    sliderSeparator.addEventListener('touchstart', function () {
        isDragging = true;
    });
    document.addEventListener('mouseup', function () {
        isDragging = false;
    });
    document.addEventListener('touchend', function () {
        isDragging = false;
    });

    document.addEventListener('mousemove', function (e) {
        processMove(e.clientX);
    });

    document.addEventListener('touchmove', function (e) {
        processMove(e.touches[0].clientX);
    });

    function processMove(x) {
        if (isDragging) {
            let sliderRect = slider.getBoundingClientRect();
            let newWidth = (x - sliderRect.left) /
                sliderRect.width * 100;
            sliderRange.value = newWidth;
            updateSliderPosition();
        }
    }
});

merci d avoir lu juque la

Salut à vous,

la solution la plus simple est d'appliquer à l'élément concerné un z-index assez élevé. Par exemple : 

.premier_plan {
   z-index: 100;
}

Vous pouvez commencer par un index plus bas et l'accroitre progressivement jusqu'à ce qu'il soit au-dessus de tout. Il faut aussi vérifier qu'il s'intègre bien à votre design.

Cordialement,