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

93

J'essaie d'insérer un div dans n'importe quelle partie du corps et de le rendre position: absoluterelatif au document entier et non à un élément parent qui a un position: relative.

html css css-position Timothy Ruhle
la source
Si sa position est absolue par rapport au document, alors elle appartient en tant qu'enfant de la <body>balise, non?
Jim Garrison
Avez-vous vu ma solution ci-dessous?
tw16
Oui. Je crée un modèle qui est utilisé dans de nombreuses pages et parfois à l'intérieur d'un élément positionné de manière relative (que je ne peux pas contrôler. Je vois maintenant que c'est impossible. Merci pour votre aide. +1 de ma part, et je le marquerai comme correct si vous dites que c'est impossible dans votre réponse.
Timothy Ruhle
BrainJar a une introduction totalement classique au positionnement en CSS qui clarifiera toutes les questions en suspens ici.
Alan H.

Réponses:

36

Vous devrez placer l' divextérieur de l' position:relativeélément et dans body.

tw16
la source
1
^^ Ceci. S'il est absolument positionné, il n'y a pas vraiment de raison de l'avoir à l'intérieur de l'élément relativement positionné de toute façon.
DOOManiac le
7
@DOOManiac - vous pouvez le vouloir à l'intérieur de l'élément relativement positionné parce que vous voulez qu'il exécute un script de survol de la souris, ou qu'il n'exécute pas un script de survol de la souris déclenché par le parent. Ma réponse permet une telle situation.
Michael.Lumley
1
@DOOManiac la raison pour laquelle placer un élément absolu dans un élément relatif est de positionner le div absolu par rapport à l'élément relatif. Si vous souhaitez vous positionner par rapport au corps, le corps est par défaut relatif, même s'il n'est pas défini de cette façon.
Jason Foglia
18
Il peut y avoir des centaines de raisons pour lesquelles vous devez avoir le conteneur pour être l'enfant d'un autre conteneur, mais la position doit être absolue pour le document. Répondre comme l'inclure directement dans le corps est faux. La bonne réponse est position: fixe. Voté contre.
walv
3
@walv: position:fixedet position:absoluten'ont pas le même comportement. Fixe est relatif à la fenêtre d'affichage (pas au document) et fera en sorte que l'élément soit toujours visible même après le défilement causant potentiellement des chevauchements, etc. Je comprends qu'il peut y avoir des raisons valables pour la structure html, mais comme la question concerne spécifiquement html et css, ma réponse est correcte. Le seul moyen sans JS de le rendre relatif au document est de le déplacer hors de l' position:relativeélément.
tw16
95

Vous cherchez position: fixed.

De MDN :

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

Adrian Holovaty
la source
28
le problème avec cette réponse est que l'utilisateur voulait utiliser absolu parce que les éléments fixes ne se déplacent pas sur le défilement et les éléments absolus le font :)
Un ami
3
Vous êtes une légende absolue.
Benisburgers
6
La question était de savoir comment se positionner par rapport au document et non à la fenêtre d'affichage
Paul Humphreys
Cela pourrait potentiellement causer des problèmes dans ie11, en raison d'un bogue avec les contextes d'empilement
James Westgate
32

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

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

<div id="loadingouter"></div>
liorq
la source
1
Cela a résolu mon problème car je ne pouvais pas placer mon élément directement à l'intérieur de l'élément body car j'utilisais des pages maîtres. Merci!
Osprey
9

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

Je suis venu à cette question à la recherche d'une solution qui fonctionnerait sans attacher le div au corps, car j'avais un script de survol de la souris que je voulais exécuter lorsque la souris était à la fois sur le nouvel élément et sur 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) afin de 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.

Michael.Lumley
la source
2
Il convient également de mentionner la fonction de position jQueryUI .
Michael.Lumley
8

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

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

Citron vert
la source
IMHO, cette réponse est la plus utile - sans déplacer l'élément directement sous le corps (ce qui n'est pas toujours possible) et sans utiliser la position fixe qui fera toujours apparaître l'élément même lors du défilement vers le bas, nous ne pouvons recourir qu'à JS. jQuery.offset({ left: 0 })pour la victoire!
BornToCode