Come posso modificare l'offset parent di un elemento CSS posizionato in modo assoluto?

Per impostazione predefinita, un elemento HTML la cui posizione è impostata su "absolute" verrà posizionato rispetto al viewport del browser.Come posso modificare l'offset parent di un elemento CSS posizionato in modo assoluto?

Ma se uno degli antenati dell'elemento è impostato su una posizione non statica, l'elemento verrà posizionato rispetto a quell'antenato. Questo antenato è il "genitore sfasato" dell'elemento.

Il problema: voglio posizionare in modo assoluto un elemento relativo al viewport, ma sfortunatamente uno dei suoi antenati è relativamente posizionato, quindi è diventato il suo padre di offset. Dal momento che sto modificando un tema di terze parti, non posso spostare l'elemento o rimuovere il posizionamento relativo del suo antenato.

Utilizzo di CSS o JavaScript, è possibile per me, in effetti, impostare o reimpostare il genitore di offset di un elemento? Capisco che la proprietà DOM [element] .offsetParent sia di sola lettura, ma c'è un modo per avere indirettamente l'effetto di impostarlo?

fonte

2015-06-19 Andy Giesler

non è possibile utilizzare JavaScript per spostare l'elemento nella gerarchia? – j08691

@ j08691 Sembra promettente +1. Di solito capisco di cosa stai parlando, ma potresti inserire un po 'più di dettaglio in una risposta? –

@ j08691 Ci ha pensato un po 'di più. Stai parlando di qualcosa come jQuery .detach() e poi .append()? –

È possibile utilizzare Javascript per spostare l'elemento. Ecco la soluzione jQuery con la funzione prependTo(), è anche possibile utilizzare appendTo().

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>

fonte

2015-06-19 20:24:58 Stickers

Molto bello. Ho pensato che avremmo dovuto rimuoverlo dalla sua posizione corrente con .detach(), ma ora vedo nella documentazione di prependTo() che si tratta di una mossa, non di un clone. –

La proprietà CSS position: fixed utilizza la viewport anziché l'antenato. Tuttavia è fisso sullo schermo durante lo scorrimento, quindi potrebbe essere un problema.

fonte

2015-06-19 19:03:07

È possibile utilizzare il valore dell'elemento padre di spostamento per spostare il figlio: è sufficiente calcolare il valore del figlio in base alle coordinate di rendering del genitore relative alla finestra.

fonte

2015-06-19 19:05:20 Amot

Come posso modificare l'offset parent di un elemento CSS posizionato in modo assoluto?

risposta

Problemi correlati