1

Creo que tengo un problema de conceptos. Veran estoy intentando hacer que dos elementos tengan el mismo zIndex para que los dos se sobrepongan uno sobre el otro. Si muevo el elemento rojo sobre el verde funciona, pero si muevo el elemento verde sobre el rojo no.

document.getElementById("uno").addEventListener("mousedown", mover);
document.getElementById("dos").addEventListener("mousedown", mover);

   function mover(e){
       elem = e.target;//obtener elemento
       elem.style.zIndex="1";
      function pocisionar(pageX, pageY){
          elem.style.left = pageX -  elem.offsetHeight/2 + 'px';
          elem.style.top = pageY -  elem.offsetHeight/2 + 'px';
          
      }
      function obtener(event){
           pocisionar(event.pageX, event.pageY);
       }
      elem.addEventListener('mousemove', obtener);
      elem.addEventListener('mouseup', eliminar);
       function eliminar(e){
         elem.removeEventListener('mousemove', obtener);
        }
     }
 p{
        height: 100px;
        width: 100px;
        position: absolute;
 }
 #uno{
      background-color: green;
 }
 #dos{
      background-color: red;
 }
    <p id="uno"></p>
    <p id="dos"></p>

Informandome encontre estas paginas: Posicionar elemento con CSS (z-index no funciona) https://www.campusmvp.es/recursos/post/por-que-aunque-pongo-un-z-index-muy-alto-no-consigo-que-se-vea-un-elem https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_contextento-en-mi-diseno-web.aspx

Creo que es un problema de stacking context. Pero no entendi muy bien que es esto y tampoco se si es mi caso, me lo pueden explicar mejor? Y tampoco se como solucionar este problema para que el cuadrado verde se sobreponga al rojo. Alguna idea?

Muchísimas gracias!

1
  • esto se da porque el rojo presede al verde por lo que al tener el mismo zindex se cancela la propiedad y se use por defecto el orden en el que estan definidos.
    – Bryro
    Commented el 27 dic. 2022 a las 15:22

1 respuesta 1

1

El inconveniente es porque ambos tienen el mismo valor de zIndex elem.style.zIndex="1";, para que funcione correctamente cuando se muevan los objetos se deberia resetear los valores de los divs y luego darle un valor mas alto al elemento que se movera, es decir esta esta manera:

document.getElementById("uno").addEventListener("mousedown", mover);
document.getElementById("dos").addEventListener("mousedown", mover);

   function mover(e){
       elem = e.target;//obtener elemento
       document.getElementById("uno").style.zIndex = "1"; 
       document.getElementById("dos").style.zIndex = "1";
       elem.style.zIndex="2";
      function pocisionar(pageX, pageY){
          elem.style.left = pageX -  elem.offsetHeight/2 + 'px';
          elem.style.top = pageY -  elem.offsetHeight/2 + 'px';
          
      }
      function obtener(event){
           pocisionar(event.pageX, event.pageY);
       }
      elem.addEventListener('mousemove', obtener);
      elem.addEventListener('mouseup', eliminar);
       function eliminar(e){
         elem.removeEventListener('mousemove', obtener);
        }
     }
 p{
        height: 100px;
        width: 100px;
        position: absolute;
 }
 #uno{
      background-color: green;
 }
 #dos{
      background-color: red;
 }
    <p id="uno"></p>
    <p id="dos"></p>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.