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!