web-dev-qa-db-fra.com

Forcer «position: absolue» à être relatif au document et non au conteneur parent

J'essaie d'insérer un div dans n'importe quelle partie du corps et de faire son position: absolute par rapport à l'ensemble du document et non à un élément parent qui a un position: relative.

htmlcsscss-position
70
Timothy Ruhle

Vous devrez placer le div en dehors du position:relative élément et dans body.

33
tw16

Vous cherchez position: fixed.

De MDN :

Le positionnement fixe est similaire au positionnement absolu, à l'exception du fait que le bloc contenant l'élément est la fenêtre d'affichage. Ceci est souvent utilisé pour créer un élément flottant qui reste dans la même position même après avoir fait défiler la page.

71
Adrian Holovaty

Ma solution était d'utiliser jQuery pour déplacer la div en dehors de son parent:

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

<div id="loadingouter"></div>
31
liorq

Si vous ne voulez pas attacher l'élément à body, la solution suivante fonctionnera.

Je suis venu à cette question à la recherche d'une solution qui fonctionnerait sans attacher la div au corps, car j'avais un script de survol que je voulais exécuter lorsque la souris survolait à la fois le nouvel élément et l'élément qui l'a engendré. Tant que vous êtes prêt à utiliser jQuery et inspiré par la réponse de @Liam William:

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

Cette solution fonctionne en soustrayant la position actuelle gauche et supérieure de l'élément (par rapport au corps) de manière à déplacer l'élément à 0, 0. Placer l'élément où vous voulez par rapport au corps est alors aussi simple que d'ajouter un décalage gauche et haut valeur.

8
Michael.Lumley

Ce n'est pas possible avec simplement CSS et HTML.

En utilisant Javascript/jQuery, vous pourriez potentiellement obtenir les éléments jQuery.offset() au DOM et le comparer au jQuery.position() pour calculer où il devrait apparaître sur la page.

6
Lime