Tengo una burbuja de diálogo que aparece al pasar el mouse sobre un div. Sin embargo, cuando se ejecuta esta acción de desplazamiento, mueve el div debajo de ella. ¿Cómo puedo evitar que esto suceda?
Resultado esperado: Hover no moverá div debajo de él y lo superpondrá si es necesario.
Aquí está mi código hasta ahora. Cualquier ayuda será apreciada, gracias.
#container { background: white; left: 97px; border-radius: 5px; min-width: 180px; min-height: 100px; position: absolute; z-index: 999; font-size: 14px; } #item { position: relative; padding: 12px 15px 12px 30px; display: flex; justify-content: space-between; } #plus:hover { position: relative; background-color: grey; margin: 0 auto; width: 75%; text-align:center; padding: 7px; font-size: 15px; color: white; border-radius: 5px; z-index:1; } #plus:after { content:''; position: absolute; display:block; top: -20px; margin-left: -5%; bottom: 80%; left: 50%; border: .75rem solid transparent; border-top: none; z-index:1; border-bottom-color: grey; } <div id="container"> <div id="item">Line 1</div> <div id="plus"></div> <div id="item">Line 2</div> </div> #container { background: white; left: 97px; border-radius: 5px; min-width: 180px; min-height: 100px; position: absolute; z-index: 999; font-size: 14px; } #item { position: relative; padding: 12px 15px 12px 30px; display: flex; justify-content: space-between; } #plus:hover { position: absolute; background-color: grey; margin: 0 auto; width: 75%; left:2vw; top:6.5vh; text-align:center; padding: 7px; font-size: 15px; color: white; border-radius: 5px; z-index:1; } #plus:after { content:''; position: absolute; display:block; top: -20px; margin-left: -5%; bottom: 80%; left: 50%; border: .75rem solid transparent; border-top: none; z-index:1; border-bottom-color: grey; } <div id="container"> <div id="item">Line 1</div> <div id="plus"></div> <div id="item">Line 2</div> </div>Tu puedes cambiar
#plus:hover { position: relative;a
#plus:hover { position: absolute; #container { background: white; left: 97px; border-radius: 5px; min-width: 180px; min-height: 100px; position: absolute; z-index: 999; font-size: 14px; } #item { position: relative; padding: 12px 15px 12px 30px; display: flex; justify-content: space-between; } #plus:hover { position: absolute; background-color: grey; margin: 0 auto; width: 75%; text-align: center; padding: 7px; font-size: 15px; color: white; border-radius: 5px; z-index: 1; } #plus:after { content: ''; position: absolute; display: block; top: -20px; margin-left: -5%; bottom: 80%; left: 50%; border: .75rem solid transparent; border-top: none; z-index: 1; border-bottom-color: grey; } <div id="container"> <div id="item">Line 1</div> <div id="plus"></div> <div id="item">Line 2</div> </div>