Wie kann ich den Offset-Parent eines absolut positionierten CSS-Elements ändern?

Standardmäßig wird ein HTML-Element, dessen Position auf "absolut" gesetzt ist, relativ zum Ansichtsfenster des Browsers positioniert.Wie kann ich den Offset-Parent eines absolut positionierten CSS-Elements ändern?

Wenn jedoch einer der Vorfahren des Elements auf eine nicht statische Position eingestellt ist, wird das Element relativ zu diesem Vorgänger positioniert. Dieser Vorfahr ist das "Elternteil" des Elements.

Das Problem: Ich möchte ein Element relativ zum Ansichtsfenster absolut positionieren, aber leider ist einer seiner Vorfahren relativ positioniert, so dass es sein Offset-Elternteil geworden ist. Da ich ein Third-Party-Theme ändere, kann ich das Element nicht verschieben oder die relative Position seines Vorfahren entfernen.

Kann ich mit CSS oder JavaScript den Versatz eines Elementes setzen oder zurücksetzen? Ich verstehe, dass die DOM-Eigenschaft [element] .offsetParent schreibgeschützt ist, aber gibt es eine Möglichkeit, die Einstellung indirekt zu bewirken?

Quelle

2015-06-19 Andy Giesler

Sie können nicht verwenden JavaScript, das Element in der Hierarchie zu bewegen? – j08691

@ j08691 Das klingt vielversprechend +1. Ich verstehe im Allgemeinen, wovon du redest, aber könntest du ein bisschen mehr Details in einer Antwort posten? –

@ j08691In diesem etwas mehr gesucht. Sprechen Sie über etwas wie eine jQuery .detach() und dann .append()? –

Sie können Javascript verwenden, um das Element zu verschieben. Hier ist die jQuery-Lösung mit prependTo() Funktion, Sie könnten auch appendTo() verwenden.

http://jsfiddle.net/6557cnew/

$(function() { 
 
    $('.absolute').prependTo('body'); 
 
});

.relative { 
 
    position: relative; 
 
    left: 50px; 
 
    top: 50px; 
 
    border: 1px solid blue; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.absolute { 
 
    position: absolute; 
 
    border: 1px solid red; 
 
    left: 0; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="relative"> 
 
    relative 
 
    <div class="absolute"> 
 
     absolute 
 
    </div> 
 
</div>

Quelle

2015-06-19 20:24:58 Stickers

Sehr schön. Ich dachte, wir müssten es mit .detach() von seiner aktuellen Position entfernen, aber ich sehe jetzt in der prependTo() -Dokumentation, dass es ein Umzug ist, kein Klon. –

CSS-Eigenschaft position: fixed verwendet das Ansichtsfenster anstelle des Vorgängers. Es ist jedoch auf dem Bildschirm beim Scrollen fixiert, so dass dies ein Problem sein kann.

Quelle

2015-06-19 19:03:07

Sie können den Wert des übergeordneten Offsets verwenden, um das untergeordnete Element zu verschieben. Berechnen Sie den Wert des untergeordneten Elements basierend auf den gerenderten Koordinaten des übergeordneten Elements relativ zum Fenster.

Quelle

2015-06-19 19:05:20 Amot

Wie kann ich den Offset-Parent eines absolut positionierten CSS-Elements ändern?

Antwort

Verwandte Themen