Forzar "posición: absoluta" para que sea relativa al documento y no al contenedor principal

93

Estoy tratando de insertar un div en cualquier parte del cuerpo y hacer que sea position: absoluterelativo a todo el documento y no a un elemento principal que tiene una extensión position: relative.

html css css-position Timothy Ruhle
fuente
Si su posición es absoluta en relación con el documento, entonces pertenece como hijo de la <body>etiqueta, ¿no?
Jim Garrison
¿Viste mi solución a continuación?
tw16
Sí. Estoy creando una plantilla que se usa en muchas páginas y, a veces, está dentro de un elemento posicionado relativamente (que no puedo controlar. Ahora veo que es imposible. Gracias por tu ayuda. +1 de mí, y lo marcaré como Correcto si dice que es imposible en su respuesta.
Timothy Ruhle
BrainJar tiene una introducción totalmente clásica al posicionamiento en CSS que aclarará cualquier pregunta pendiente aquí.
Alan H.

Respuestas:

36

Tendrá que colocar el divexterior del position:relativeelemento y el interior body.

tw16
fuente
1
^^ Esto. Si está absolutamente posicionado, no hay realmente una razón para tenerlo dentro del elemento relativamente posicionado de todos modos.
DOOManiac
7
@DOOManiac: es posible que lo desee dentro del elemento relativamente posicionado porque desea que ejecute un script de mouseover o no ejecute un script de mouseout activado por el padre. Mi respuesta permite tal situación.
Michael.Lumley
1
@DOOManiac la razón para poner un elemento absoluto en un elemento relativo es colocar el div absoluto en relación con el elemento relativo. Si desea una posición relativa al cuerpo, el cuerpo por defecto es relativo, incluso si no está configurado de esa manera.
Jason Foglia
19
Puede haber cientos de razones por las que necesita que el contenedor sea el hijo de otro contenedor, pero la posición debe ser absoluta para el documento. Respuesta como incluirlo directamente en el cuerpo está mal. La respuesta correcta es posición: fija. Voto en contra.
walv
3
@walv: position:fixedy position:absoluteno tienen el mismo comportamiento. Fijo es relativo a la ventana gráfica (no al documento) y hará que el elemento sea siempre visible incluso después de desplazarse, potencialmente causando superposiciones, etc. Entiendo que puede haber razones válidas para la estructura html, pero como la pregunta es específicamente sobre html y css, mi respuesta es correcta. La única forma sin JS de hacerlo relativo al documento es sacarlo del position:relativeelemento.
tw16
95

Estás buscando position: fixed.

De MDN :

El posicionamiento fijo es similar al posicionamiento absoluto, con la excepción de que el bloque contenedor del elemento es la ventana gráfica. Esto se usa a menudo para crear un elemento flotante que permanece en la misma posición incluso después de desplazarse por la página.

Adrian Holovaty
fuente
28
el problema con esta respuesta es que el usuario quería usar absoluto porque los elementos fijos no se mueven en el desplazamiento y los elementos absolutos sí :)
Un amigo
3
Eres una leyenda absoluta.
Benisburgers
6
La pregunta era cómo posicionar en relación con el documento y no con la ventana gráfica
Paul Humphreys
Esto podría causar problemas en ie11, debido a un error con los contextos de apilamiento
James Westgate
32

Mi solución fue usar jQuery para mover el div fuera de su padre:

<script>
    jQuery(document).ready(function(){
        jQuery('#loadingouter').appendTo("body");
    });
</script>

<div id="loadingouter"></div>
liorq
fuente
1
Esto resolvió mi problema porque no podía colocar mi elemento directamente dentro del elemento del cuerpo porque estaba usando páginas maestras. ¡Gracias!
Águila pescadora
9

Si no desea adjuntar el elemento body, la siguiente solución funcionará.

Llegué a esta pregunta buscando una solución que funcionara sin adjuntar el div al cuerpo, porque tenía un script de mouseover que quería ejecutar cuando el mouse estaba sobre el nuevo elemento y el elemento que lo generó. Siempre que esté dispuesto a usar jQuery e inspirado por la respuesta de @Liam William:

var leftOffset = <<VALUE>>;
var topOffset = <<VALUE>>;
$(element).css("left", leftOffset - element.offset().left);
$(element).css("top", topOffset - element.offset().top);

Esta solución funciona restando la posición izquierda y superior actual del elemento (en relación con el cuerpo) para mover el elemento a 0, 0. Colocar el elemento donde desee en relación con el cuerpo es entonces tan simple como agregar un desplazamiento izquierdo y superior. valor.

Michael.Lumley
fuente
2
También vale la pena mencionar la función de posición jQueryUI .
Michael.Lumley
8

Esto no es posible simplemente con CSS y HTML.

Usando Javascript / jQuery, potencialmente podría llevar los elementos jQuery.offset()al DOM y compararlos jQuery.position()para calcular dónde debería aparecer en la página.

Lima
fuente
En mi humilde opinión, esta respuesta es la más útil: sin mover el elemento directamente debajo del cuerpo (lo que no siempre es posible) y sin usar la posición fija, lo que hará que el elemento siempre aparezca incluso cuando se desplaza hacia abajo, solo podemos recurrir a JS. jQuery.offset({ left: 0 })¡por la victoria!
BornToCode