CSS Flujo y posicionamientohtml.formacionatomica.com/assets/recursos/Flujo CSS.pdf · CSS Flujo y...
Transcript of CSS Flujo y posicionamientohtml.formacionatomica.com/assets/recursos/Flujo CSS.pdf · CSS Flujo y...
CSS Flujo y posicionamiento
Vamos a comprobar que los cuadros de las páginas web siguen un flujo natural. Además, veremos cómo podemos anular dicho flujo y colocar elementos fijos o flotantes.Existen tres posibilidades de colocar las cajas en una página web:
● Flujo normal● Flujo Absoluto● Float
CSS Flujo y posicionamiento
La página web es un rio tranquilo. Normalmente, los elementos de una página web siguen el llamado document flow, el flujo del documento. Todos los elementos HTML nadan en dicho flujo. Es el estado natural de una página web, como la gravedad para los arquitectos.
CSS Flujo y posicionamiento
En realidad es sencillo:
● Un elemento se coloca tan alto y tan a la izquierda como sea posible● Al añadir otros elementos, se colocan a su derecha hasta que no hay más espacio● Cuando no hay más espacio a la derecha, saltan una línea una línea abajo y vuelve a empezar por la izquierda
CSS Flujo y posicionamiento
Es importante adaptarse al flujo de la página, y no luchar con él.
Empezaremos estudiando el comportamiento natural de las cajas cuando no están sometidas a ninguna otra fuerza.
HTMLHTML CSSCSS<body><div>Box 1</div><div>Box 2</div><div>Box 3</div></body>
body {color: black;background-color: gray;padding: 0;}div {background-color: white;padding: 10px;border: 1px solid black;margin: 5px }
CSS Flujo y posicionamientoTres cajas en el flujo
CSS Flujo y posicionamiento
Puesto que div es un elemento de bloque, las tres cajas se encuentran una debajo de otra, aunque su contenido sea muy pequeño.Por naturaleza, un elemento de bloque impone su anchura: adopta siempre toda la anchura disponible del elemento padre, en este caso de body.
CSS Flujo y posicionamiento
A continuación, los tres hermanos div se reducen a un 20% con la propiedad width. Todo lo demás es igual...
div {width: 20%;background-color: white;padding: 10px;border: 1px solid black;margin: 5px }
CSS Flujo y posicionamiento
Las cajas reducidas también están apiladas en vertical. div es un elemento de bloque, y los elementos de bloque tienen un salto de línea integrado. Aunque width reduce el tamaño de la caja, el salto de línea se mantiene.Este comportamiento normal de los cuadros en el flujo en CSS también se denomina position:static.
CSS Flujo y posicionamiento
El posicionamiento relativo con position:relative consigue dos cosas:● Desplaza la caja fuera de su posición normal en el flujo● Marca la posición original del elemento como protegida
Los demás elementos del documento se comportan como si el elemento todavía se encontrase en su sitio original dentro del flujo normal.
HTMLHTML CSSCSS<body><div id=”otro”>Box 1</div><div>Box 2</div><div>Box 3</div></body>
body {color: black;background-color: gray;padding: 0;margin:;}div {background-color: white;padding: 10px;border: 1px solid black;margin: 5px }
CSS Flujo y posicionamientoTres cajas en el flujo
HTMLHTML CSSCSS
<body><div id=”otro”>Box 1</div><div>Box 2</div><div>Box 3</div></body>
#otro {position: relative;top: 25px;right: 25px;background-color: #f3c600;}
CSS Flujo y posicionamientoTres cajas en el flujo
CSS Flujo y posicionamientoPodrás observar que las cajas 2 y 3 no han cambiado. El posicionamiento relativo preserva el espacio original del elemento y los elementos siguientes no pasan a ocuparlo.Un elemento posicionado obtiene sus coordenadas de las propiedades top, right, bottom y left, que se calculan con respecto a la posición original en el flujo: ● top: 25px coloca la caja hacia abajo. Se añaden 25px desde arriba a la posición normal de la caja● right: 25px desplaza la caja hacia la izquierda, de forma que en parte desaparece. Se insertan 25 px a la derecha de la posición original.
CSS Flujo y posicionamiento
Todos los datos son relativos a la posición original e indican dónde se insertan el valor, y no la direccion en la que debe desplazarse la caja. En realidad es lógico, pero a primera vista position: relative puede parecer complicado.
CSS Flujo y posicionamiento
A diferencia del posicionamiento relativo, el absoluto saca el elemento fuera del flujo. El elemento se “eleva” y todos los demás elementos de la página se comportan como si ya no estuviera allí.Vamos a mantener nuestro código HTML, y vamos a realizar el siguiente cambio en el código CSS:
div {position: absolute;top: 25px;...
CSS Flujo y posicionamiento
Solo cambia una palabra, pero el efecto es colosal. De repente, la caja 1 se encuentra a la derecha y las cajas 2 y 3 suben hacia arriba.Los elementos con posicionamiento absoluto salen del flujo y se colocan encima de los demás elementos.La posición exacta se indica mediante top, right, bottom o left, pero los valores de estas cuatro propiedades ya no dependen de la posición original en el flujo.
CSS Flujo y posicionamiento
Los valores top, right, bottom o left dependen de:● El posicionamiento absoluto de un elemento hace referencia al siguiente elemento contenedor (containing block), posicionado con relative, absolute o fixed.● En el supuesto de que no haya ningún elemento contenedor (muy habitual en la práctica), el posicionamiento se efectúa en función del elemento más alto en la estructura del documento, es decir, no body sino html.
CSS Flujo y posicionamiento
Esto se puede resumir de la siguiente forma:● El posicionamiento absoluto es relativo a algún punto de referencia● Existen dos puntos de referencia posibles:
Un elemento contenedor posicionado El elemento raíz html
En la rutina diaria, esto supone mucha confusión, por ello vamos a verlo en detalle.
CSS Flujo y posicionamientoPosicionamiento absoluto, relativo al elemento raíz
Vamos a realizar los siguientes cambios CSS en nuestra pagcodigo.css:
#encabezado p {
posicion:absolute;
top: 25 px;
left: 50%;
padding: 5px 0;
...
CSS Flujo y posicionamiento
Posicionamiento absoluto, relativo al elemento raíz
Esto es lo que ocurre:● En primer lugar, #encabezado p se extrae del flujo y ya no está presente para los demás elementos.● Puesto que no hay ningún elemento contenedor, las indicaciones top: 25px y left: 50% hacen referencia al elemento html y el párrafo empieza 50px desde arriba y exactamente en la mitad de la ventada del navegador.
CSS Flujo y posicionamiento
Posicionamiento absoluto, relativo al elemento raíz
El posicionamiento vertical desde el margen superior de la ventana del navegador es muy preciso, pero el posicionamiento horizontal, 50% desde la izquierda, es una cuestión de suerte.
Si en algún momento dejásemos de centrar la página, al párrafo posicionado le daría igual. Se mantendría en sus trece porque su punto de referencia es el elemento maestro html.
CSS Flujo y posicionamientoPosicionamiento absoluto, relativo al encabezado
Lo mejor y más seguro sería posicionar el párrafo relativo al encabezado, y para lograrlo recurriremos a un sencillo truco. Consiste en convertir encabezado en un containeing block.
Si posicionamos el encabezado con position:relative, pero no le atribuimos ningún valor, estará posicionado y se convertirá en el punto de referencia para el posicionamiento absoluto de #encabezado p
¿Parece complicado? Vamos a probar...
CSS Flujo y posicionamiento
Posicionamiento absoluto, relativo al encabezado
Vamos a realizar los siguientes cambios CSS:
#encabezado {
posicion:relative; /*posicionado pero en el flujo*/
color: black;
...
CSS Flujo y posicionamiento
Posicionamiento absoluto, relativo al encabezado
Vamos a realizar los siguientes cambios CSS:
#encabezado p {
posicion:absolute;
top: 10 px;
right: 10px; /*en lugar del 50%*/
padding: 5px 0;
...
CSS Flujo y posicionamientoPosicionamiento absoluto, relativo al encabezado
Esta solución ofrece varias ventajas con respecto a la primera:● El punto de referencia del párrafo es #encabezado y más concretamente, el borde externo del padding superior y derecho.● Si la página dejara de estar centrada, el párrafo seguiría manteniendo su posición.
Es decir, el posicionamiento absoluto se vuelve relativamente flexible gracias a este truco.
CSS Flujo y posicionamiento
Posicionamiento fijo
El posicionamiento fijo, con position:fixed se comporta casi como position:absolute, pero con una leve diferencia:● Un elemento fijo no se desplaza
En los elementos fijos, el elemento contenedor es siempre la ventana del navegador.
Esto es ideal para secciones de navegación.
CSS Flujo y posicionamientoFloat: cuadros flotantes
Además de los posicionamientos que ya hemos visto, también existe la propiedad float. A diferencia de relative, absolute y fixed, float no es un valor de la propiedad position, sino una propiedad CSS en toda regla.
To float significa flotar y una caja flotante hace tres movimientos: se eleva y sale del flujo normal, flota como un globo dentro de un elemento contenedor y se desplaza hacia la izquierda o la derecha según como sople el viento.
CSS Flujo y posicionamiento
Float: cuadros flotantes
Uno de los usos clásicos de float es el posicionamiento de imágenes en un flujo de texto.
Para ilustrarlo, descarga la imagen de un globo de google.
CSS Flujo y posicionamiento
Float: cuadros flotantes
Inserta el siguiente código en tu página index.html
<div id=”encabezado”>
<h2>Inicio</h2>
<p><img scr=”balloon.jpg” alt=”Globo rojo” width=”78” heigth=”100”>
Las páginas están compuestas de ...
CSS Flujo y posicionamiento
Float: cuadros flotantes
Y ahora modifica como sigue:
<div id=”encabezado”>
<h2>Inicio</h2>
<p><img scr=”balloon.jpg” alt=”Globo rojo” width=”78” heigth=”100” style=”float:right;”>
Las páginas están compuestas de ...
CSS Flujo y posicionamientoFloat: cuadros flotantes
Aunque el resultado todavía no es bueno, el texto fluye junto a la imagen. La imagen sigue los tres movimientos típicos de float: sale del flujo, se coloca encima de la caja contenedora p y después lo más a la derecha posible.
Puesto que la imagen se encuentra dentro de p, no flota más arriba que el límite superior del párrafo.● El texto del párrafo envuelve el gráfico● background, padding, border y margin de p no fluyen alrededor del gráfico, sino que se colocan debajo.
CSS Flujo y posicionamiento
Float: cuadros flotantes
Atención, solo el texto rodea a la imagen, background, padding, border y margin están debajo. Es decir, para definir un espacio entre el texto y la imagen, lo más sencillo es asignárselo a la imagen.
CSS Flujo y posicionamiento
Float: cuadros flotantes
Vamos a crear una separación entre la imagen y el texto:
<div id=”encabezado”>
<h2>Inicio</h2>
<p><img scr=”ballon.jpg” alt=”Globo rojo” width=”78” heigth=”100” style=”float:right; margin-left: 15px;”>
Las páginas están compuestas de ...
CSS Flujo y posicionamientoFloat: cuadros flotantes
Vamos a crear class diferenciadas para izq y dcha:
.imgizda {
float:left;
padding: 3px; /*distancia entre borde y texto*/
border: 5px solid #ccc; /*el borde de la img*/
margin-right: 10px; /*distancia entre borde y txt*/
margin-bottom: 10px; /*distancia hacia abajo*/
}
CSS Flujo y posicionamientoFloat: cuadros flotantes
Vamos a crear class diferenciadas para izda y dcha:
.imgdcha {
float:right;
padding: 3px; /*distancia entre borde y texto*/
border: 5px solid #ccc; /*el borde de la img*/
margin-left: 10px; /*distancia entre borde y txt*/
margin-bottom: 10px; /*distancia hacia abajo*/
}
CSS Flujo y posicionamiento
Float: cuadros flotantes
Y ahora modifica el código html de index.html:
<p><img src=”balloon.jpg” alt=”Globo Rojo” width=”98” height=”100” class=”imgdcha” >
CSS Flujo y posicionamientoFloat y clear
float suele implicar la intervención de clear. Sin clear el estado flotante se aplica a todos los elementos siguientes.
En nuestro ejemplo, no solo el primer párrafo rodea la imagen, sino también todos los siguientes. Por tanto, es necesario que la imagen deje de flotar.
La propiedad clear obliga a una caja a empezar debajo de un elemento flotante. clear puede tener los valores left, right o both
CSS Flujo y posicionamiento
Float y clear
clear:left termina un float:left
clear:right termina un float:right
clear:both termina ambos
Por tanto, si no queremos que el segundo párrafo de texto de la página de inicio se coloque junto a la imagen, la solución es sencilla:
<p style=”clear:right”>Los siguientes pasos muestran … </p>