Erzwingen Sie, dass "Position: absolut" relativ zum Dokument und nicht zum übergeordneten Container ist

91

Ich versuche, ein div in einen beliebigen Teil des Körpers einzufügen und es position: absoluterelativ zum gesamten Dokument zu machen und nicht zu einem übergeordneten Element, das ein hat position: relative.

html css css-position Timothy Ruhle
quelle
Wenn seine Position relativ zum Dokument absolut ist, gehört es als untergeordnetes Element des <body>Tags, nicht wahr?
Jim Garrison
Hast du meine Lösung unten gesehen?
Tw16
Ja. Ich erstelle eine Vorlage, die auf vielen Seiten verwendet wird und manchmal in einem relativ positionierten Element (das ich nicht kontrollieren kann. Ich sehe jetzt, dass es unmöglich ist. Danke für Ihre Hilfe. +1 von mir, und ich werde es als markieren Richtig, wenn Sie sagen, dass es in Ihrer Antwort unmöglich ist.
Timothy Ruhle
BrainJar bietet eine völlig klassische Einführung in die Positionierung in CSS , die alle noch offenen Fragen hier klärt .
Alan H.

Antworten:

36

Sie müssen die divAußenseite des position:relativeElements und hinein platzieren body.

tw16
quelle
1
^^ Das hier. Wenn es absolut positioniert ist, gibt es sowieso keinen Grund, es innerhalb des relativ positionierten Elements zu haben.
DOOManiac
7
@DOOManiac - Sie möchten es möglicherweise innerhalb des relativ positionierten Elements, weil es ein Mouseover-Skript ausführen soll oder kein vom übergeordneten Element ausgelöstes Mouseout-Skript. Meine Antwort erlaubt eine solche Situation.
Michael.Lumley
1
@DOOManiac Der Grund für das Einfügen eines absoluten Elements in ein relatives Element besteht darin, das absolute Div relativ zum relativen Element zu positionieren. Wenn Sie relativ zum Körper positionieren möchten, ist der Körper standardmäßig relativ, auch wenn er nicht so eingestellt ist.
Jason Foglia
16
Es kann Hunderte von Gründen geben, warum der Container das Kind eines anderen Containers sein muss, aber die Position sollte absolut zum Dokument sein. Antwort wie es direkt in den Körper aufzunehmen ist falsch. Richtige Antwort ist Position: fest. Abgestimmt.
Walv
3
@walv: position:fixedund position:absolutehaben nicht das gleiche Verhalten. Behoben ist relativ zum Ansichtsfenster (nicht zum Dokument) und bewirkt, dass das Element auch nach dem Scrollen immer sichtbar ist, was möglicherweise zu Überlappungen usw. führt. Ich verstehe, dass es gültige Gründe für die HTML-Struktur geben kann, aber da es sich bei der Frage speziell um HTML und handelt CSS, meine Antwort ist richtig. Die einzige Möglichkeit ohne JS, es relativ zum Dokument zu machen, besteht darin, es aus dem position:relativeElement zu verschieben.
Tw16
92

Du suchst position: fixed.

Von MDN :

Die feste Positionierung ähnelt der absoluten Positionierung, mit der Ausnahme, dass der Block, der das Element enthält, das Ansichtsfenster ist. Dies wird häufig verwendet, um ein schwebendes Element zu erstellen, das auch nach dem Scrollen der Seite an derselben Position bleibt.

Adrian Holovaty
quelle
27
Das Problem mit dieser Antwort ist, dass der Benutzer Absolut verwenden wollte, weil feste Elemente sich nicht beim Scrollen bewegen und absolute Elemente dies tun :)
Ein Freund
3
Du bist eine absolute Legende.
Benisburger
6
Die Frage war, wie man relativ zum Dokument und nicht zum Ansichtsfenster positioniert
Paul Humphreys
Dies könnte möglicherweise Probleme in ie11 verursachen, aufgrund eines Fehlers mit Stapelkontexten
James Westgate
32

Meine Lösung bestand darin, jQuery zu verwenden, um das div außerhalb seines übergeordneten Elements zu verschieben:

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

<div id="loadingouter"></div>
liorq
quelle
1
Dies löste mein Problem, da ich mein Element nicht direkt im body-Element platzieren konnte, weil ich Masterseiten verwendete. Vielen Dank!
Fischadler
9

Wenn Sie das Element nicht anhängen möchten, bodyfunktioniert die folgende Lösung.

Ich kam zu dieser Frage und suchte nach einer Lösung, die funktionieren würde, ohne das div an den Body anzuhängen, da ich ein Mouseover-Skript hatte, das ich ausführen wollte, wenn sich die Maus sowohl über dem neuen Element als auch über dem Element befand, aus dem es hervorging. Solange Sie bereit sind, jQuery zu verwenden, und inspiriert von der Antwort von @Liam William:

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

Diese Lösung subtrahiert die aktuelle linke und obere Position des Elements (relativ zum Körper), um das Element auf 0, 0 zu verschieben. Das Platzieren des Elements an der gewünschten Stelle relativ zum Körper ist dann so einfach wie das Hinzufügen eines linken und oberen Versatzes Wert.

Michael.Lumley
quelle
2
Erwähnenswert ist auch die Positionsfunktion jQueryUI .
Michael.Lumley
8

Dies ist nicht einfach mit CSS und HTML möglich.

Mit Javascript / jQuery können Sie die Elemente möglicherweise jQuery.offset()in das DOM übertragen und vergleichen, um jQuery.position()zu berechnen, wo sie auf der Seite erscheinen sollen.

Limette
quelle
IMHO ist diese Antwort am hilfreichsten - ohne das Element direkt unter den Körper zu bewegen (was nicht immer möglich ist) und ohne eine feste Position zu verwenden, die das Element auch beim Scrollen nach unten immer erscheinen lässt, können wir nur auf JS zurückgreifen. jQuery.offset({ left: 0 })für den Sieg!
BornToCode