Ho un div la cui posizione viene eliminata dal relativo posizionamento del div del contenitore. Mentre rimuovendo il posizionamento relativo del genitore risolve il problema, preferiremmo non implementarlo come soluzione in quanto potrebbe rompere altre cose. C'è un modo per costringere il bambino a ignorare il posizionamento dei suoi genitori?C'è un modo per un particolare div di ignorare il posizionamento div del genitore?
Sfortunatamente non c'è modo di rendere un elemento "compensato" per il relativo posizionamento genitore in modo dinamico con i CSS. Blocco ripensare il layout e dal position:fixed non è che cosa siete dopo, le opzioni sono:
position:relative e gli offset esattamente opposti rispetto a quello del genitore (sarà necessario digitare nuovamente i valori esatti). Problemi minimi, ma ora devi ricordarti di mantenere sincronizzate manualmente le due coppie di offset (per genitore e figlio). Mettere un commento dicendo "se cambi questo devi anche cambiare #THAT" ti aiuterà.Tutto sommato, consiglierei di fare # 1 su # 2, e solo se la soluzione migliore (cambiare il layout) non è disponibile.
Ok, hai detto 2 con javascript. ma forse puoi consigliare qualche soluzione con javascript? jQuery per esempio. Grazie –
@ ПавелИванов: Soluzione per fare cosa esattamente? Se hai in mente un problema specifico, perché non fare una tua domanda? :-) – Jon
Se la modifica del "relativo" a "statico" non è un'opzione per voi ... Sono d'accordo con Jon, è necessario utilizzare javascript per posizionare il div figlio, e qui è un codice che utilizza javascript per eseguire l'opzione 2 della sua risposta, in cui mi muovo il bambino ad un vero e proprio osizionare considerando tutte le posizione di genitore relativa:
var div = document.getElementById("banner");
var parentDiv = document.getElementById("banner");
var posT = 0;
var posL = 0;
while(parentDiv = parentDiv.offsetParent){
posT += parentDiv.offsetTop;
posL += parentDiv.offsetLeft;
}
posT -= div.offsetTop;
posL -= div.offsetLeft;
div.style.top = (-1)*posT+"px";
div.style.left = (-1)*posL+"px";\t .corpo{
\t
\t \t position:relative;
\t \t margin-left:100px;
\t \t margin_top:100px;
\t \t background-color:yellow;
border:#ccc 1px solid;
padding:10px;
\t
\t }
\t #banner{
\t
\t \t position:absolute;
top:250px; /* inicial value - goal position considering the document reference */
left:150px; /* inicial value - goal position considering the document reference */
\t width:50px;
\t \t height:50px;
\t \t background-color:blue;
font-size:9px;
color:white;
font-family:Arial;
\t }asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
asjdghasd<br>
<div class="corpo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
\t <div id="banner" >
<strong>Banner</strong><br/>
top: 250px<br/>
left:150px
</div>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
</div>
Ignora posizionamento del genitore in che modo? 'position: fixed' lo farebbe, ma potrebbe non essere quello che stai cercando. – Jon
Penso che dovresti ripensare al posizionamento del tuo div child – Ibu
@ Giusto, perché il div figlio si affida in qualche misura al suo genitore. Credo che ciò che intendo più specificamente sia ignorare tutto ciò che sta cambiando nel posizionamento relativo del genitore - perché il bambino si comporti come se il genitore avesse un posizionamento statico. – josh