Página de Ejemplos

(1) En esta página vamos a ilustrar algunos conceptos sobre las propiedades de caja CSS y el posicionamiento de elementos.

El elemento HTML tiene asignado un color zanahoria. El Elemento BODY un color azul claro. Con un navegador plenamente compatible con CSS verias en consecuencia un pequeño reborde zanahoria alrededor de una pagina de fondo azul. El texto que has leido hasta ahora es texto normal, sin posicionamiento. Fijate een el numero entre parentesis, indica el orden en el que esta escrito el codigo fuente

(2) A continuación escribiremos un párrafo con solo una palabra: hola, que ira con fondo verde y posicionada absolutamente 0,0. Por tanto buscalo arriba a la izquierda

(3) hola

(4) Este es un párrafo estatico -sigue el flujo del documento- y engloba otro párrafo anidado como elemento hijo. Pero como este hijo tiene posición absoluta, nuevamente se salta el flujo del documento:

(5) este es el hijo del párrafo del mismo color. Su propia posicion: 5px top, 340 px left

(6) Un nuevo parrafo, esta vez posicionado relativamente, que por ello sigue el flujo del documento (7) Y este es su hijo. posicion absoluta 70 660, medida desde el inicio del elemento padre (es decir la esquina superior izquierda del parrafo anterior). Por cierto, redimensiona la ventana de tu navegador y veras el diferente comportamiento. Los elementos posicionados relativa o estaticamentese acomodan al nuevo tamaño. Los absolutos mantienen la posicion.

(8) aqui otro poco de texto sin posicionar. Fijate por donde va el flujo del documento

(11) esto es todo por ahora

bueno, no (12) esto es un párrafo con la propiedad width, y abajo lo que ves es el parte de mi antiguo logo: superponiendo dos elementos se consigue el efecto gráfico de sombra ... pero es solo texto