Como puede ver en este fragmento, me gustaría crear un contenedor div con algo de texto, el blueBox que sube y otro div que cubre el contenedor pero no el blueBox. ¿Alguien sabe por qué el blueBox no es visible en la parte superior del div rojo a pesar de que tiene un índice z 4 y el div rojo tiene un índice z 3?
#container{ height:100px; width:100px; z-index:1; position:absolute; border:1px; background-color:yellow; } #moving1{ height:30px; width:30px; background-color:blue; position:absolute; left:20%; top:50%; z-index:4!important; transition: 1s ease; } #moving2{ z-index: 3; height:100px; width:100px; position:absolute; top:0%; left:0%; background-color:red; transition: all 1s ease; } .moveLeft{ transform: translateX(-110%); } .moveUp{ transform: translateY(-200%); } <div id="container" onmouseleave="document.getElementById('moving2').classList.remove('moveLeft'); document.getElementById('moving1').classList.remove('moveUp');"> container <div id="moving1"></div> </div> <div id="moving2" onmouseenter="this.classList.add('moveLeft'); document.getElementById('moving1').classList.add('moveUp');"></div>Está cerrando el contenedor div antes de ingresar al div cuadrado azul. Necesita dos divs secundarios dentro del contenedor para que funcione el índice z.
En este caso, necesitarías algo como esto:
#container{ height:100px; width:100px; z-index:1; position:absolute; border:1px; background-color:yellow; } #moving1{ height:30px; width:30px; background-color:blue; position:absolute; left:20%; top:50%; z-index:4!important; transition: 1s ease; } #moving2{ z-index: 3; height:100px; width:100px; position:absolute; top:0%; left:0%; background-color:red; transition: all 1s ease; } .moveLeft{ transform: translateX(-110%); } .moveUp{ transform: translateY(-200%); } <div id="container" onmouseleave="document.getElementById('moving2').classList.remove('moveLeft'); document.getElementById('moving1').classList.remove('moveUp');"> container <div id="moving1"></div> <div id="moving2" onmouseenter="this.classList.add('moveLeft'); document.getElementById('moving1').classList.add('moveUp');"></div> </div>Además de la primera respuesta, si entiendo correctamente, desea un efecto de desplazamiento en esos divs, de ser así, podría eliminar los parámetros "onmouseleave" y "onmouseenter" y editar su archivo para que se vea más limpio así:
#container{ height:100px; width:100px; z-index:1; position:absolute; border:1px; background-color:yellow; } #moving1{ height:30px; width:30px; background-color:blue; position:absolute; left:20%; top:50%; z-index:4!important; transition: 1s ease; } #moving2{ z-index: 3; height:100px; width:100px; position:absolute; top:0%; left:0%; background-color:red; transition: 1s ease; } #container:hover #moving1{ transform: translateY(-200%); } #container:hover #moving2{ transform: translateX(-110%); } <div id="container" > container <div id="moving1"></div> <div id="moving2"></div> </div>