Anomalías en div ocultos con position:relative

[Linton]

Estoy haciendo pruebas con desplegables grandes, y veo con sorpresa que a pesar de anclar los divs ocultos con position:relative se pierde la alineación cuando hago cambios en el contenido del div. Lo explico con imágenes:

Los botones que llevan asociados sendos divs ocultos.

...que aparecen cuando el cursor entra en el enlace respectivo:




Mi sorpresa viene cuando hago algún cambio en el div oculto, por ejemplo darle un padding-top aunque sea de 1px. Entonces el div decide subir un peldaño, hasta quedar por debajo de primer span del botón, y no sé por qué lo hace:



¿Algún experto que me oriente! Gracias, un saludo.

[codeams]

¿Acaso están los divs grandes dentro de los divs pequeños? Eso explicaría el problema.
No se esta alterando la posición, sino todo lo contrario esta en la posición correcta pero la posición correcta no es lo que imaginabas.

[siddartha23]

Hola que tal me llama la atención que posiciones los divs ocultos con relative, ¿No es mejor posicionarlos con absolute y cada uno de sus respectivos botones padre tengan position relative?

[Linton]

Codeams, no son divs dentro de divs, sino divs dentro de <li>. El código:

Código HTML:

<nav>
        <ul>
            <li id="uno"><a href="#"><span class="arriba">Uno</span>
                <span class="abajo">Recursos</span></a>
                <div class="hide izda"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
                diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
                erat volutpat.</p> <p>Ut wisi enim ad <a href="http://www.google.com">minim veniam</a>, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></div>
            </li>
            <li id="dos"><a href="#"><span class="arriba">Dos</span>
                <span class="abajo">Agenda</span></a>
                <div class="hide centro"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
                diam nonummy nibh <a href="http://www.google.com">euismod</a> tincidunt ut laoreet dolore magna aliquam
                erat volutpat.</p><p> Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></div>
            </li>
            <li id="tres"><a href="#"><span class="arriba">Tres</span>
                <span class="abajo">Proyectos</span></a>
                <div class="hide dcha"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
                diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
                erat volutpat. </p><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper <a href="http://www.google.com">suscipit</a> lobortis nisl ut aliquip ex ea commodo consequat.</p></div>
            </li>
        </ul>
    </nav>
 

Siddartha23, con position:relative se sitúan respecto a la pantalla, no al elemento padre, lo que genera problemas, ¿no?

Gracias, un saludo.

[pzin]

Si tienes un problema de CSS, preguntas en un foro de CSS, ¿qué menos que poner el código CSS?

Iniciado por Linton

Siddartha23, con position:relative se sitúan respecto a la pantalla, no al elemento padre, lo que genera problemas, ¿no?

¿Uhm? No. La posición relativa se posiciona respecto a la posición natural del elemento.

Lo que comenta es que tienes que poner la posición relativa a lo que tú llamas botones y a los cuadros grandes ponerles una posición absoluta y estos se posicionarán respecto al primer elemento que tenga una posición relativa, en este caso a los botones.

[Linton]

Hombre , llamarlos botones es una práctica muy extendida; a pesar de mi historial en otras materias aquí no puedo arrogarme la acuñación

...tienes que poner la posición relativa a lo que tú llamas botones y a los cuadros grandes ponerles una posición absoluta y estos se posicionarán respecto al primer elemento que tenga una posición relativa, en este caso a los botones.

Información útil ¡Gracias!

[pzin]

Iniciado por pzin

Lo que comenta es que tienes que poner la posición relativa a lo que tú llamas botones y a los cuadros grandes ponerles una posición absoluta y estos se posicionarán respecto al primer elemento que tenga una posición relativa, en este caso a los botones.

Que por cierto, no es el primer ancestro cuya posición sea relativa si no una posición que no sea estática.

Este pzin no es muy concreto a veces, tengan cuidado.

[Linton]

¡Tomo nota, gracias, un saludote!