0

estoy realizando la página en donde va una pregunta y cuando responden "no" el botón de no se mueve por todo la página (es imposible darle click) y la única opción es darle a "si", ya tengo la interfaz hecha pero cuando quiero mover de lugar al botón de "no" a otra posición con Javascript, no funciona a pesar de que le ponga position-fixed pero eso hace que el botón de "si" y de "no" se ponga una encima de otra y no sé cómo separarlos para que no se vea feo, ya que si no uso el el position-fixed no se mueve el botón.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pregunta</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">

</head>
<body class="row align-items-center vh-100 text-center">

    <div class="container-fluid">
        
        <div class="pregunta">
            <!-- Aquí abajo puedes cambiar la pregunta -->
            <h1 class="fw-bold">Quieres ser mi novia?❤</h1>
        </div>

        <div class="foto">
            <!-- Aquí puedes cambiar la imagen -->
            <img src="img/imagen.jpg" class="rounded w-25 p-2" alt="Fotito">
        </div>
        
        <div class="respuestas">
            <!-- Aquí puedes cambiar las respuestas -->
           
            <a class="btn btn-primary btn-lg fw-bold position-fixed" id="negativo" href="#" role="button">No</a>
            <a class="btn btn-primary btn-lg fw-bold position-fixed" id="positivo" href="#" role="button">Si</a>
        </div>

        
    </div>    
    
    <script >
        let respuestaSi=document.getElementById('positivo')
        respuestaSi.addEventListener("click",function(e){
            alert("Sabía que dirías que si ❤");
        })
        let respuestaNo=document.getElementById('negativo')
        respuestaNo.addEventListener("mousemove",function(e){
            let x = Math.round(Math.random()*93);
            let y = Math.round(Math.random()*93);
            respuestaNo.style.left = x+"%";
            respuestaNo.style.top = y+"%";
})
    </script> 
</body>
</html>

1 respuesta 1

1

Cuando trabajas con un elemento con position:fixed tus mejores aliados para moverlos son top/bottom/left/right, los cuales lo moverán según el más próximo elemento "padre" con position:relative, tus botones quedarían así:

<a style="width:4rem; right:40%"class="btn btn-primary btn-lg fw-bold position-fixed" id="negativo" href="#" role="button">No</a>
<a style="width:4rem; left:40%"class="btn btn-primary btn-lg fw-bold position-fixed" id="positivo" href="#" role="button">Si</a>

Como veras lo único que le agregué fue un style a cada uno, al botón "no" esta a un 40% de la derecha (right:40%) y el botón "si" esta a un 40% de la izquierda (left:40%) (ambos según el width del padre).

Nota: Después de realizar una prueba, el código solo con los right/left funciona estéticamente pero el botón de "no" cambiaba de tamaño de forma rara (tal vez por alguna propiedad css aplicada de bootstrap) así que le coloque un width:4rem; a cada uno para que no pierda ese tamaño aun después de desplazarse.

1
  • Muchas gracias por tu respuesta me ayudó mucho! ahora tengo otro problema, al momento de realizar ese cambio, cuando lo pongo en la versión móvil los botones se pegan demasiado y se fusionan, cómo podría hacer para que sigan separados y se siga viendo como en la versión de pc Commented el 2 jun. 2021 a las 15:24

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.