Ahora bien, esto no sirve de mucho para crear columnas, porque los elementos posicionados relativamente siguen en el flujo del documento – en la posicion donde estaban originalmente. Sigue ocupando espacio, pero no donde aparece, sino donde habría estado si hubiese estado posicionado estáticamente.
¿Qué significa esto? El posicionamiento relativo es mayormente útil para mover un elemento algunos píxeles en alguna dirección, o quedará un hueco en la página. Sin embargo, existe otra utilidad para esta propiedad que es mucho más importante: Un elemento posicionado relativamente cuenta como posicionado, aunque no se mueva ni un solo píxel. Ya veremos porque esto es importante.
Cuando la gente se refiere al posicionamiento, CSS-P o capas, lo que normalmente quieren decir es elementos con position:absolute. Las propiedades top, bottom, left y right especifican la distacia del borde correspondiente. ¿Pero de qué?
Irónicamente, los elementos posicionados absolutamente son realtivos. Si, han leido correctamente. Un elemento posicionado absolutamente esta posicionado relativamente a otro elemento, llamado bloque contenedor. Aquí viene la definición de esto. Respiren un poco y agarrense a su asiento.
El bloque contenedor de un elemento posicionado absolutamente es su ancestro posicionado más cercano, o si no hay tal elemento, el bloque contenedor inicial del documento.
Por "ancestro posicionado" quiero decir un elemento estrcturalmente superior cuya propiedad de position es absolute, fixed o relative. Asi que aqui esta el uso importante para el posicionamiento relativo del que hablamos antes. Definiendo position:relative para un elemento, sin moverlo, podemos establecer un nuevo contexto para sus hijos posicionados absolutamente. Suena fácil, no?
¿Pero si no hay ancestro posicionado? Ahi es donde entra el llamado bloque contenedor inicial. El estándar CSS dice que esto lo elije el navegador. El estándar también dice que podría estar relacionado con la ventana de visualizacion de la página. En la práctica esto significa que podría ser o el elemento BODY o el HTML.
Elementos posicionados absolutamente están completamente eliminados del flujo del documento. Esto no significa que no ocupan espacio. O, para ponerlo de otra manera, no afectan a los elementos subsiguientes. Por lo tanto debemos asegurarnos de que nuestro contenido no termine debajo de un elemento posicionado absolutamente, a menos que este sea el efecto que deseamos, obviamente.
Un elemento posicionado absolutamente con top:100px queda colocado tal que su borde superior esta 100 píxeles sobre el borde de su bloque contenedor. En los navegadores que soportan CSS se pueden especificar valores para los cuatro bordes y el navegador se encarga de calcular la altura y anchura. Tristemente esto no ocurre con Internet Explorer, asi que es casi siempre necesario especificar al menos la anchura de un elemento posicionado absolutamente.
Es perfectamente legal especificar valores negativos para los valores de los bordes, pero hay que tener cuidado, hay que estar muy seguros de cual es el bloque contenedor. De otra manera existe el riesgo de que el contenido del elemento posicionado absolutamente quede parcial o totalmente fuera de la pantalla.
Dijimos antes que el posicionamiento absoluto es relativo, asi que no debería sorprender que el posicionamiento fijo sea absoluto.
Un elemento con position:fixed esta posicionado absolutamente con respecto a la ventana del navegador. El posicionamiento fijo es similar al posicionamiento absoluto, pero tiene sus diferencias. La posición siempre es referente a la ventana del navegador; la ventana del navegador siempre es el bloque contenedor. El elemento no esta en el flujo del documento y se queda en su lugar aunque el usuario se mueva por el documento.
Desafortunadamente Internet Explorer no soporta posicionamiento fijo. Hay otras maneras de imitar el funcuionamiento del posicionamiento fijo, pero esta propiedad no es tán útil como parece. Si, es una manera de tener un menu que nunca se mueve, pero la mayoría de los usuarios esperan que todo se mueva con la página.
Usuarios que han visto este tema también han visto...
- Posicionar una imagen rodeada de texto con CSS
- Usando CSS en tablas
- Degradado con CSS Filter
- Aplicar los estilos a diferentes dispositivos con CSS
- Superposición de imágenes con CSS
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2011 Factoría de Internet S.L.. Todos los derechos reservados.