Estoy luchando para entender por qué necesito agregar position: relative; para un elemento contenedor cuando su elemento secundario está posicionado absolutamente (es decir, position: absolute;). Déjame explicarte con el ejemplo.
Código HTML de muestra:
<ul>
<li>...</li>
<li id="parent">
<a href="#">Menu</a>
<div id="child">...</div>
</li>
<li>...</li>
<li>...</li>
</ul>
Tenga en cuenta que el código representa un menú horizontal. Que aparece algo así:
El problema es cuando el valor de la position propiedad de #parent es por defecto (es decir, position: static;), su anchura aumenta con la anchura de la #child a pesar de que el elemento hijo está posicionado absolutamente, lo que no debería suceder como #child Ahora está fuera del flujo debido a position: absolute;.
Todo cae en su lugar, cuando lo uso. position: relative; en #parent es decir, su ancho permanece igual, sin importar el tamaño del #child.
¿Que me estoy perdiendo aqui? ¿Por qué necesito usar position: relative; ¿Por algo que (supongo) debería ser el comportamiento predeterminado?
ACTUALIZAR: He creado un violín para explicar mejor mi punto. Por favor echa un vistazo.
Pasos para reproducir el problema:
En la vista previa del violín, haga clic en el menú "Canales", que debería sacar su elemento de menú oculto.
Ahora golpea F12 en su navegador (Chrome, Safari o Firefox con Firebug instalado), use la herramienta de inspección para inspeccionar el menú "Canales".
Eso debería indicarle inmediatamente el código HTML relevante en la pestaña "Elementos" del panel ahora abierto Dev Tools o Firebug.
Busque la primera instancia de
<li class="float-left top-menu">dentro<ul id="top-navbar">y coloque el mouse sobre esa línea. Debería mostrarte algo como esto:
¿Por qué el cuadro indicador azul (es decir, el menú) es tan grande cuando debería ser del tamaño del borde rojo? ¿Tienes la idea de lo que estoy diciendo ahora?
Ahora aplica position: relative; sobre el li (es decir. li.float-left.top-menu { position: relative; } y ver la diferencia por ti mismo.)
Respuestas
3 para la respuesta № 1position:relative crea una nueva caja contenedora desde la cual cualquier elemento secundario posicionado absolutamente establecerá su parte superior / izquierda en relación a.
position: static no creará una caja contenedora y cualquier niñoLos elementos que están absolutamente posicionados comenzarán a subir por el árbol DOM para encontrar una caja contenedora hasta que toque el cuerpo y utilicen el antepasado que encuentre para la parte superior / izquierda.
Editar: Lo siento, malinterpreté tu pregunta. Parece que no puedo reproducir su descripción del problema (vea esto violín). Por favor, puede publicar el código de un caso de prueba mínima de su problema.
0 para la respuesta № 2
Bueno. Me siento estupido ahora. Estaba usando min-width en el elemento hijo, y como el ancho está bastante definido, el ancho del menú "s (es decir, padre") también se amplió. Removiendo min-width Aclaro todas las dudas.
Y un DEBE LEER: Posicionamiento absoluto dentro del posicionamiento relativo (además este comentario y esta respuesta)