Tengo un div cuya posición se descarta porque contiene el posicionamiento relativo de div. Si bien eliminar el posicionamiento relativo de los padres soluciona el problema, preferimos no implementar esto como una solución, ya que podría romper otras cosas. ¿Hay alguna manera de obligar al niño a ignorar el posicionamiento de sus padres?¿Hay alguna manera para que un div en particular ignore su posicionamiento de div principal?
Desafortunadamente, no hay forma de hacer que un elemento "compense" dinámicamente el posicionamiento relativo de sus padres con CSS. A menos que replantear el diseño y desde position:fixed no es lo que está después, sus opciones son:
position:relative y compensa exactamente lo contrario de lo que tiene el padre (deberá volver a introducir los valores exactos). Mínimo alboroto, pero ahora debe recordar mantener sincronizados los dos pares de compensaciones (para padres e hijos) manualmente. Poner un comentario diciendo "si cambias esto también tienes que cambiar #THAT" te ayudará.En general, recomendaría hacer # 1 sobre # 2, y solo si la mejor solución (cambiando el diseño) no está disponible para usted.
Bien, dijiste 2 con javascript. pero tal vez puedas recomendar alguna solución con javascript? jQuery por ejemplo. Gracias –
@ ПавелИванов: ¿Solución para hacer exactamente qué? Si tiene un problema específico en mente, ¿por qué no hace una pregunta por su cuenta? :-) – Jon
Si cambiar el "relativo" a "estático" no es una opción para usted ... Estoy de acuerdo con Jon, debe usar javascript para ubicar el div infantil, y aquí hay un código que usa javascript para realizar la opción 2 de su respuesta, cuando muevo el niño a un OSICIÓN reales teniendo en cuenta todo la posición relativa de los padres:
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>
Ignorar posicionamiento de los padres de qué manera? 'position: fixed' haría eso, pero podría no ser lo que buscas. – Jon
Creo que debería reconsiderar la ubicación de su div hijo – Ibu
@Jon a la derecha, porque el div infantil está confiando en su padre hasta cierto punto. Creo que lo que quiero decir más específicamente es ignorar lo que está cambiando en el posicionamiento relativo de los padres, para que el niño se comporte como si el padre tuviera un posicionamiento estático. – josh