¿Cómo le doy a un elemento jQuery el posicionamiento absoluto en una página?

¿Cómo solicito la posición absoluta de un elemento de jQuery mi actual script de jQuery es¿Cómo le doy a un elemento jQuery el posicionamiento absoluto en una página?

<head> 
    ... 
    <script type="text/javascript" src="slidemenu.js"></script> 
    <script type="text/javascript"> 
     $('#sm').css({ 
      position: 'absolute', 
      top: '10px', 
      left: '10px' 
     }); 
    </script> 
</head> 
<body onload="slideMenu.build('sm',286,10,10,1)"> 
    <ul id="sm" class="sm"> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
    </ul> 
    ...

Y mi css actual es:

#sm { 
    margin:0; 
    padding:0; 
} 
#sm { 
    list-style:none; 
    top:240px; 
    left:300px; 
    width:604px; 
    height:286px; 
    display:block; 
    overflow:hidden;z-index: 200; 
    position:absolute; 
} 
#sm li { 
    float:left; 
    display:inline; 
    overflow:hidden;z-index: 200; 
    position:relative; 
}

Fuente

2011-01-18 Stephanie

Por qué necesita el estilo de su elemento con jQuery ? ¿Por qué no CSS? '#sm {position: fixed; arriba: 10px; izquierda: 10px; } ' –

utilizar la funcionalidad .css:

$('#yourelement').css({ 
    position: 'absolute', 
    top: '10px', 
    left: '10px' 
});

Fuente

2011-01-18 13:49:42

probablemente debería tomar alguna información de posición con' .position() 'o' .offset() '. – jAndy

soy nuevo en jquery, ¿cómo incorporaría .position() o .offset() en este script? – Stephanie

@Stephanie: ver mi respuesta. – jAndy

En caso

mira como:

var $elem = $('#someelement_id'); 

$elem.css({ 
    position: 'absolute', 
    top:  $elem.position().top, 
    left:  $elem.position().left 
});

Esto debería garantizar que el elemento permanecerá en la posición que tenía antes.

Fuente

2011-01-18 14:04:12 jAndy

¿estoy poniendo valores dentro de los elementos de posición()? Por ejemplo position (10px) .top, – Stephanie

También estoy confundido sobre cómo esto se incorpora en mi código anterior, ¿dónde lo pongo y cuál es $ elem? y que es #someelement_id – Stephanie

Stephanie, esto es solo para aclarar lo que ha demostrado jAndy, con un poco de mi propia respuesta. Pero, siendo todavía relativamente nuevo en jQuery, puedo relacionarme con tu confusión. Desmontemos el código de Andy y respondamos a sus comentarios.

También estoy confundido sobre cómo esto se incorpora en mi código anterior, ¿dónde lo pongo y cuál es $ elem. y cuál es #someelement_id

En el código de jAndy, el elemento $ es el elemento que está tratando de ubicar. Él está usando #someelement_id solo para hacer su ejemplo genérico. Tan específico de su código, su

var $elem = $('#someelement_id');

se convertiría en

var $elem = $('#sm');

en el código. Todo lo que hace allí es almacenar la referencia del elemento (objeto) en la variable $elem. No hay nada lujoso allí, no creo. No estoy seguro de por qué él precede $ en el nombre de la variable ...? Creo que var elem = $('#sm'); funcionaría igual, a menos que me falta algo. Entonces, eso solo te da el elemento con el que quieres trabajar.

¿estoy poniendo valores dentro de los elementos de posición()? Por ejemplo, posición (10px) .top

No. No, si su objetivo es mantener el elemento completamente posicionado en su posición actual. Si separamos esa línea de su código, $elem.position() devolverá un objeto que contiene las propiedades top y left. Puede leer sobre el método de posición aquí jQuery API position (Consulte jQuery API offset también porque proporciona información diferente y le permite proporcionar coordenadas para una nueva posición para el elemento). Por lo que puedo decir, como dice jAndy en su respuesta, su código establecerá la posición absoluta del elemento en su ubicación actual, por lo tanto, lo mantendrá en su lugar.

No creo que esto sea lo que desea si realmente desea mover un elemento de su ubicación actual a otra ubicación. Para eso, estarías configurando la parte superior e izquierda según la respuesta de Matt Asbury, o podrías usar alguna combinación de las dos respuestas si quisieras mover el elemento a una nueva posición relativa a su ubicación actual.Por ejemplo,

$elem.css({ 
    position: 'absolute', 
    top:  $elem.position().top + 10, 
    left:  $elem.position().left + 10 
});

O, con jQuery API offset, y la combinación de los dos, creo que se podría hacer algo como:

var newCoords = { 
    top: $elem.position().top + 10, 
    left: $elem.position().left + 10 
}; 
$elem.offset(newCoords);

No estoy seguro de que es el enfoque de "mejor".

El enlace proporcionado por Nikkelman también es bueno, pero puede que haya muchas cosas por descubrir si es nuevo en jQuery.

Otra cosa que he notado, y tal vez te dejó estas cosas porque parecía obvio, pero por si acaso:

Es necesario incluir jquery.js desde algún lugar, a medida que han incluido su slidemenu js.
Y generalmente tendrías tu código jQuery envuelto en un bloque $(document).ready(function() {...});, pero esto no siempre es necesario.

¡Espero que esto ayude y no acabo de enlodar las aguas para usted!

Fuente

2011-01-19 17:51:46

Parece que lo está haciendo correctamente, pero olvidó poner la secuencia de comandos dentro del $(document).ready().

$(document).ready(function() { 
    $('#sm').css({ 
     position: 'absolute', 
     top: '10px', 
     left: '10px' 
    }); 
});

Esto garantiza que su secuencia de comandos no se ejecute hasta que todo el DOM esté cargado en el navegador. De lo contrario, intentará aplicar el CSS antes de conocer el elemento #sm. Como todo lo que hace es establecer un estilo, ¿hay alguna razón por la que no pueda agregar esto a su archivo CSS?

Me gustaría también sugieren la eliminación de la onload de su etiqueta <body> y mover la llamada a la función slideMenu.build() en $(document).ready(), también.

Fuente

2011-01-19 18:26:13 keithjgrant

Ah, ya veo, editaste eso. Esta respuesta se aplica al jQuery que editaste en tu pregunta. – keithjgrant

si utiliza

position: absolute;

su contenedor absoluto se activará al desplazarse por la página.

intento con

posición: fijo;

esta es la mejor solución. Y su contenedor de posicionamiento será visible incluso de desplazarse por la página

Fuente

2013-05-20 15:10:33 PonrajPaul

Aquí es una forma genérica de absolutizar cualquier elemento:

function absolutize(selector_expression) { 
    element = jQuery(selector_expression).eq(0); 

    if (element.css('position') == 'absolute') { 
     return element; 
    } 

    element.css({ 
     position: 'absolute', 
     top: element.offset().top + 'px', 
     left: element.offset().left + 'px', 
     width: element.width() + 'px', 
     height: element.height() + 'px' 
    }); 

    return element; 
}

utilizarlo: absolutize('#sm');

Fuente

2013-09-13 13:32:21

¿Cómo le doy a un elemento jQuery el posicionamiento absoluto en una página?

Respuesta

Cuestiones relacionadas