Título Original: Relatively Absolute
Autor: Tommy Olsson
Diseñar una página web normalmente es más que elegir fuentes, colores y elementos gráficos. Tambien implica elegir una dispoción para los elementos. Un diseñador web tiene tres opciones para hacer esto:
Usar tablas para posicionar es algo prehistórico. Usar float es generalmente la mejor opción, especialmente cuando no se sabe cual va a ser la columna más larga. Sin embargo, los navegadores antiguos y Internet Explorer tienen algunos problemas para manejar los float, pero ese es otro tema.
Posicionamiento es probablemente la parte más incomprendida de CSS 2. Veamos como funciona.
Este artículo tambien esta traducido al Polaco: Bezwzględnie względny.
A veces se refiere al posicionamiento absoluto como CSS-P. Novatos aprendiendo con Dreamweaver tambien lo llaman layers (capas), lo cual es desafortunado porque puede ser confundido con el elemento propietario de Netscape llamado <layer>.
Pero empecemos por el principio. La propiedad depositionen CSS acepta cuatro valores (ademas de inherit):
Para todos los valores menos static podemos modificar la posicion del elemento por medio de las propiedades top, bottom, left y right.
Los elementos con position:static, que es el valor por defecto de todos los elementos, no estará posicionado. Su posición en la ventana estará determinada por donde ocurren en el documento.
Asi que el valor static solo sirve para sobreescribir un valor previo.
Usaremos el termino "posicionado estáticamente" en este artículo, aunque no sea completamente correcto.
Los elementos con position:relative están posicionados relativos a ellos mismos. Esto suena raro, pero puede ser útil a veces.
Si damos un valor a cualquier de las cuatro propiedades de los costados, el elemento relativo se mueve en relación a la posición que habría ocupado si hubiese estado posicionado estáticamente.
Esto puede sonar a Chino, pero es bastante lógico. Si le ponemos position:relative a un elemento, sin dar valores para los costados, el elemento termina estando donde habría estado si le hubiesemos puesto position:static o si no le hubiesemos puesto ninguna propiedad.
Si le ponemos top:10px, el elemento se mueve 10 píxeles desde su borde superior. Esto significa que se mueve hacia abajo. Un valor negativo mueve el elemento en la dirección opuesta, asi daría el mismo resultado poner bottom:-10px. Esto quiere decir que no sirve de nada poner valores top y bottom, o left y right. Sin embargo, puede ser que alquien quiera dar valors para top y left si quiere mover el elemento vertical y horizontalmente.
Usuarios que han visto este tema también han visto...
- Una hoja de estilo para diagnosticar fallos en el marcado
- Sintaxis CSS
- Cómo solucionar problemas en CSS
- Efectos en textos e imágenes con CSS
- Arreglar los bordes punteados en Internet Explorer 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-2008 Factoría de Internet S.L.. Todos los derechos reservados.