> Faqs > Capa con position absolute sale descolocada

Capa con position absolute sale descolocada

Tengo un problema con una capa position: absolute, que no la consigo posicionar donde querría. En principio, estoy indicando el top y left de esa capa, con los correspondientes atributos CSS, t me sale en un lugar totalmente descolocado. Resulta que marco el top y left, pero no aparece en el lugar que indico. Estoy diciéndole que se posicione 100 píxeles desde el top de la página y 10 píxeles desde el left. Se supone que esa posicion, con los atributos top y left de CSS es en relación a la esquina superior izquierda del navegador. Pero me sale en un lugar totalmente distinto. ¿Qué es lo que puede pasar?

Respuestas

Como señalas, generalmente position:absolute se posiciona con los atributos CSS top y left con respecto a la esquina superior izquierda. Así es como funciona en la mayoría de los casos, pero no siempre es así. En realidad position:absolute se posiciona con respecto a la esquina superior izquierda del primer contenedor de esa capa que tenga un position distinto de static. Es decir, si la capa a la que le pones el position absolute la colocas dentro de otra capa que tiene un position distinto de static, ocurre que los atributos top y left para posicionarla serán relativos a la esquina superior izquierda de la capa contenedor en vez de a la esquina superior izquierda del espacio disponible en el navegador. No sé si es tu caso, pero por poner un ejemplo, esto es algo que pasa con los contenedores del Framework 960 grid System, tienen position: relative, distinto de static. Por eso las capas que coloques como absolute dentro de uno de los contenedores no se posicionarán con respecto a la esquina superior izquierda del navegador. En general este problema se soluciona colocando esa capa con position absolute fuera de cualquier contenedor, es decir, meterla directamente en el BODY de la página. Te sugiero que te repases los distintos comportamientos de los posibles valores del atributo position de CSS.

Miguel Angel
3090 138 206 17