dominios y alojamiento web en hostalia

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...

La FAQ Capa con position absolute sale descolocada tiene

Pertenece a la categoría:

Pregunta
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?


Respuesta de Miguel Angel Alvarez
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.

Complementar la respuestaComplementar la respuesta
Volver al árbol de categoríasVolver al árbol de categorías

Comentarios
Fueron enviados 2 comentarios a la faq
2 comentarios revisados:
Position: Absolute
18/5/2010
Saludos.
Prueba con utilizar solo marging y padding.
De esta forma podras posicionarlo donde quieras
Recuerda... No uses ningun posicionamiento... top ni left.
Que tengas un buen día.

Barraqu...
Dudas CSS
25/3/2012
Buenas tardes. Procuraré ser breve.

Estoy diseñando mi primera web y tengo dos dudas:

1.- ¿Cómo centro horizontalmente un div que contiene un menu hecho con una lista ul en el centro de otro div contenedor?

2.- Tengo un párrafo con una imagen de fondo con un background-position negativo pero el div que lo contiene recorta la imagen. ¿hay alguna forma de que se vea? Adjunto el código...

#presentacion {
width:585px;
float:left;
margin: 45px 25px 0px 15px;
background-image:url(../img/t.png);
background-repeat:no-repeat;
background-position: -30px -30px;}

Muchas gracias por vuestra web. Es de lo mejor que hay en la red. Muy clarita y legible...

Saludos.

Volver al árbol de categoríasVolver al árbol de categorías

Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...