CSS Posicionamiento y Visualización

CSS
Posicionamiento y Visualización
CSS Layout
Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

lunes 12 de julio de 2010
Cascading Style Sheets
Level 2 Revision 1 (CSS 2.1) Specification
Hojas de Estilo en Cascada

Nivel 2 Revisión 1, Especificación 2.1

El Navegador Interpreta
Cuando el Navegador obtiene el contenido HTML y

CSS (Etiquetas y Propiedades Visuales) realiza una
serie de “cálculos” complejos para poder renderizar
(realizar o producir)
la página en la pantalla.

Declaración de estilos CSS
Aplicamos estilos a los elementos HTML de una página
construyendo una lista de propiedades
selector { selector puede ser:

nombre-propiedad: valor; • etiqueta html (h1, p, a, etc.)
... • una clase .nombre
nombre-propiedad: valor; • un identificador #nombre
}

Declaración de estilos CSS
ad o r { h1 {
i _ i d e ntific a l o r;
#m o r ; pi e da d: v
o p i e da d: v a l nombre-pro
- p r
nombre
s e { . ..
.m i _ c l a
... d : v a l o r ;
c
r oo pl i
o e
r:d#a fff fff ;
fffff ; b re -p
color: # f nom
}
} ...
: # fff fff ;
color
}
Declaramos los estilos en un fichero con
extensión .CSS
¿Cómo aplico los estilos a mi documento HTML?

h1{ directamente, no hace falta hacer
nada, la etiqueta coge estilo sola
.....}
.mi_clase{ añado a la etiqueta el atributo

class <p class=”mi_clase”>
}
#identificador{ añado a la etiqueta el atributo id

<p id=”mi_clase”>
}
...
Modelo de Caja
El navegador para poder visualizar y representar un elemento de la página HTML ,
crea una caja.
Para generar una caja tiene en cuenta:
• Las propiedades Width (Ancho) y Height (Altura)
• Tipo de elemento Bloque o Inline (En linea)
• Posicionamiento (Normal, Relativo, Fijo, Absoluto, Fijo o Flotante)
• Relaciones entre elementos y donde se encuentra cada uno
• Tamaño de imágenes
• Tamaño del navegador

Modelo de Caja
• Contenido
• Padding (Espacio
Interior)
• Borde
• Imagen de Fondo
• Color de Fondo
• Margen

Modelo de Caja

Tipos de elementos HTML
• Elementos Bloque
• Empiezan en una nueva línea
• Ocupan todo el espacio posible hasta el finál de línea
• Elementos Inline (En línea)
• No empiezan necesariamente en nueva línea
• Ocupan sólo el espacio necesario para mostrar su
contenido
• Width (Ancho) y Height (Alto) se ignorar en los

elementos inline
Tipos de elementos y Cajas
El tipo de elemento (block o inline) influye en la caja que

crea el navegador para poder mostrarlo.

Tipos de elementos y Cajas
párrafo <p> </p> elemento block

enlace <a> </a> elemento inline
elementos block no debe ir dentro de elemento inline
elementos inline puede ir dentro de elementos block

Pueden ser inline o block según
circustancias:
button, del, iframe, ins, map, object, script

Modelos de posicionamiento
• Normal o estático - el que utiliza por defecto el navegador
• Relativo - sigue el normal y desplaza respecto a la posición original
• Absoluto - la posición de un elemento se fija respecto del

elemento contenedor, el resto de elementos quedan igual.
• Fijo - hace la caja inamovible, siempre en la misma posición
• Flotante - desplaza cada caja todo los posible hacia la izquierda o

hacia la derecha de la línea en la que se encuentra

Posicionamiento con CSS
selector {
propiedad: valor;
position: valor ;
...
valor puede ser:
}
static, relative, absolute, fixed, inherit
El valor por defecto es static

DESPLAZAMIENTO
• Relativo - sigue el normal y se desplaza según propiedades top,

bottom, right y left (desplazamiento desde su border superior /
inferior, derecho o izquierdo)
• Absoluto - se desplaza según propiedades top, bottom, right y

left, pero el origen depende elemento contenedor (desplazamiento
desde el borde superior / inferior, derecho o izquierdo de su
elemento padre)
• Fijo - hace la caja inamovible, siempre en la misma posición

controlada por top, bottom, right y left

Estático o Normal
• Es el posicionamiento que tiene por defecto todos y cada uno de los

elementos, todos comienzan como estáticos
• Los elementos fluirán de forma normal según sean elementos bloque o

elementos en linea
• No se utiliza. La única razón para usarlo es fijar o reponer un elemento

que no controles como estático

static | relative | absolute | fixed
Estático o Normal
• Es el posicionamiento que tiene por defecto todos y cada uno de los

elementos, todos comienzan como estáticos
• Los elementos fluirán de forma normal según sean elementos bloque o

elementos en linea
• No se utiliza. La única razón para usarlo es fijar o reponer un elemento

que no controles como estático

Relativo
• Relativo a él mismo
• Si definimos el elemento como position: relative; y no definimos

ningún valor para top, bottom, left o right, no pasará nada (sería
como si fuese estático o normal)
• Al usar top, bottom, left o right, se desplazará según lo indicado

desde su posición natural
• Sigue afectando a los demás elementos como sin no se moviese
• Un uso podría ser el alinear elementos o corregir alineaciones

Relativo
• Relativo a él mismo
• Si definimos el elemento como position: relative; y no definimos

ningún valor para top, bottom, left o right, no pasará nada (sería
como si fuese estático o normal)
• Al usar top, bottom, left o right, se desplazará según lo indicado

desde su posición natural
• Sigue afectando a los demás elementos como sin no se moviese
• Un uso podría ser el alinear elementos o corregir alineaciones

Relativo - Ventaja 1
Aparece la propiedad
z-index: numero;
que introduce una

coordenada
tridimensional para
posicionar en profundidad
los elementos (y no
funciona con static)

Aparece la propiedad
z-index: numero;
que introduce una

coordenada
tridimensional para
posicionar en profundidad
los elementos (y no
funciona con static)

• Limita el ámbito de los elementos hijos con posicionamiento

absoluto (position: absolute;) lo cual puede darnos ventajas:





Absoluto
• Es muy potente y coloca cada elemento de la página exáctamente
donde quieres
• Utilizamos top, bottom, left o right para posicionar el elemento
• La posición es relativa al padre del elemento que tenga definido el

posicionamiento como relativo (o absoluto)
• Si no hubiese este elemento padre se referirá al elemento <html>

posicionandose en relación a la página misma
• Los elementos posicionados, se eliminan del flujo normal de la página y

los demás (ni afecta ni es afectado por otros elementos)

Absoluto
• Es muy potente y coloca cada elemento de la página exáctamente
donde quieres
• Utilizamos top, bottom, left o right para posicionar el elemento
• La posición es relativa al padre del elemento que tenga definido el

posicionamiento como relativo (o absoluto)
• Si no hubiese este elemento padre se referirá al elemento <html>

posicionandose en relación a la página misma
• Los elementos posicionados, se eliminan del flujo normal de la página y

los demás (ni afecta ni es afectado por otros elementos)

Fijo
• Se usa en raras ocasiones, pero puede ser útil
• El elemento se posiciona de forma relativa a la vista o la ventana del

navegador
• No cambia de posición aunque haya scroll en la página
• Permite que algunos elementos estén siempre presentes (ej.

navegación)
• Puede ser un efecto interesante, pero hay que testearlo para que sea
práctico

Fijo
• Se usa en raras ocasiones, pero puede ser útil
• El elemento se posiciona de forma relativa a la vista o la ventana del

navegador
• No cambia de posición aunque haya scroll en la página
• Permite que algunos elementos estén siempre presentes (ej.

navegación)
• Puede ser un efecto interesante, pero hay que testearlo para que sea
práctico

Ejemplo posicionamiento static
• Todos los elementos

está posicionados por
defecto static (pos.
estático o normal)
• Se aplicó reseteo de
hoja de estilos reset.css
• Se crearon div’s para

separar bloques de
información y colorearon

Ejemplo posicionamiento static

Ejemplo posicionamiento relative
• SubApartado1 y
SubApartado3 están
posicionados de forma
relativa
• El resto de elementos
está posicionados por
defecto static (pos.
estático o normal)
• El posicionamiento
relativo no afecta a otros
elementos, todo sigue
como si no hubiese
pasado...

Ejemplo posicionamiento relative

Ejemplo posicionamiento absolute
• SubApartado1 y
SubApartado3 están
absoluta
• El resto de elementos está

posicionados por defecto
static (pos. estático o
normal)
• El posicionamiento absoluto
es en referencia al padre
inmediato con
posicionamiento absoluto o
relativo (div subapartados)
• Los elementos desaparecen

del flujo normal y los demás
se comportan como si no
estuvieses allí

Ejemplo posicionamiento absolute

Ejemplo posicionamiento fixed
• SubApartado1 y
SubApartado3 están
fixed
• El resto de elementos está

posicionados por defecto
static (pos. estático o
normal)
• El posicionamiento
absoluto es en referencia
al documento (el. <html>)
• Los elementos
desaparecen del flujo
normal y no afectan al
Los elementos no se desplazan,quedan
resto
fijados incluso con scroll
Ejemplo posicionamiento fixed

CSS Posicionamiento y Visualización

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Posicionamiento y Visualización

Uploaded by

Copyright:

Available Formats

CSS

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

Hojas de Estilo en Cascada

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

Cuando el Navegador obtiene el contenido HTML y

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

selector { selector puede ser:

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

¿Cómo aplico los estilos a mi documento HTML?

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

.mi_clase{ añado a la etiqueta el atributo

#identificador{ añado a la etiqueta el atributo id

Para generar una caja tiene en cuenta:

• Las propiedades Width (Ancho) y Height (Altura)

• Tipo de elemento Bloque o Inline (En linea)

• Posicionamiento (Normal, Relativo, Fijo, Absoluto, Fijo o Flotante)

• Relaciones entre elementos y donde se encuentra cada uno

• Tamaño del navegador

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

• Width (Ancho) y Height (Alto) se ignorar en los

El tipo de elemento (block o inline) influye en la caja que

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

párrafo <p> </p> elemento block

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

button, del, iframe, ins, map, object, script

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

• Normal o estático - el que utiliza por defecto el navegador

• Relativo - sigue el normal y desplaza respecto a la posición original

• Absoluto - la posición de un elemento se fija respecto del

• Fijo - hace la caja inamovible, siempre en la misma posición

• Flotante - desplaza cada caja todo los posible hacia la izquierda o

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

• Relativo - sigue el normal y se desplaza según propiedades top,

• Absoluto - se desplaza según propiedades top, bottom, right y

• Fijo - hace la caja inamovible, siempre en la misma posición

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

• Es el posicionamiento que tiene por defecto todos y cada uno de los

• Los elementos fluirán de forma normal según sean elementos bloque o

• No se utiliza. La única razón para usarlo es fijar o reponer un elemento

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

• Es el posicionamiento que tiene por defecto todos y cada uno de los

• Los elementos fluirán de forma normal según sean elementos bloque o

• No se utiliza. La única razón para usarlo es fijar o reponer un elemento

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

• Si definimos el elemento como position: relative; y no definimos

• Al usar top, bottom, left o right, se desplazará según lo indicado

• Sigue afectando a los demás elementos como sin no se moviese

• Un uso podría ser el alinear elementos o corregir alineaciones

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

• Si definimos el elemento como position: relative; y no definimos

• Al usar top, bottom, left o right, se desplazará según lo indicado

• Sigue afectando a los demás elementos como sin no se moviese

• Un uso podría ser el alinear elementos o corregir alineaciones

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

que introduce una

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

que introduce una

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

• Limita el ámbito de los elementos hijos con posicionamiento

Diseño y Desarrollo de Apps Web Avanzado Miguel Castro | Twitter @micafe

• Limita el ámbito de los elementos hijos con posicionamiento