Mover la ubicación un div en JavaScript

Tengo una función que construí (es un poco básico en este momento), pero no puedo encontrar cómo mover el objeto cuando se expande en MouseOver para que no mueva a los demás en la página, ¿es esto posible?

function expandbox(x) {
    x.style.height = "100px";
    x.style.width = "100px";
}

function returnbox(x) {
    x.style.height = "80px";
    x.style.width = "80px";
}

preguntado el 16 de abril de 13 a las 08:04

Para evitar que mueva los otros elementos, establezca su posición en absoluto y luego asigne un índice z. -

2 Respuestas

Haga que la posición del elemento sea relativa dentro de un contenedor relativo, luego cambie sus dimensiones.

Asegúrese de darle un índice z más alto.
Colóquelo con left,right,top,bottom propiedades de style.

Respondido 16 Abr '13, 08:04

No necesita ser dentro un contenedor relativo, solo necesita ser position: relative sí mismo. - controlar

@xec, es posible que desee leer este. - gdoron está apoyando a Monica

Pero no estamos tratando de mover un absolutamente elemento posicionado, estamos tratando de mover un relativamente elemento posicionado. - controlar

@xec, cierto, aunque generalmente cuando necesita z-index, quiere position:absolute, no relativo. - gdoron está apoyando a Monica

Entonces, ¿por qué sugiere usar la posición relativa en su respuesta :( - controlar

Si desea mantener el elemento en el flujo del documento, configúrelo en position: relative y muévelo usando top y left, que será relativo a donde comenzó el elemento.

Usaré el mismo tipo de función que hiciste, para demostrar:

function moveBox(x) {
    x.style.position = "relative";
    // move 20px down and 10px left from original position
    x.style.top = "20px";
    x.style.left = "-10px";
}

Si desea eliminar el cuadro del flujo del documento (los siguientes elementos no se verán afectados por su presencia), establezca su posición en absolute en cambio. Los valores superior e izquierdo serán relativos a su ancestro posicionado más cercano (o <body> si no hay ninguno, como supongo en el comentario a continuación)

function moveBox(x) {
    x.style.position = "absolute";
    // position box 20px from top of body
    x.style.top = "20px";
    // and 10px from the left
    x.style.left = "10px";
}

Se considera que un elemento está "posicionado" si tiene un valor distinto de static (defecto, leer más aquí), por lo que si desea controlar con qué es relativo el elemento posicionado absolutamente, puede proporcionar un elemento contenedor position: relative

Respondido 16 Abr '13, 12:04

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.