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


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.


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


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


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.


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 }


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.


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 }


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 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.


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.


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;...


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.


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.


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;

...


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.


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...


Posicionamiento absoluto, relativo al encabezado

Vamos a realizar los siguientes cambios CSS:

#encabezado {

posicion:relative; /*posicionado pero en el flujo*/

color: black;

...


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.


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.


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.



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 ...



Y ahora modifica como sigue:


<h2>Inicio</h2>

<p><img scr=”balloon.jpg” alt=”Globo rojo” width=”78” heigth=”100” style=”float:right;”>



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.



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.



Vamos a crear una separación entre la imagen y el texto:


<h2>Inicio</h2>

<p><img scr=”ballon.jpg” alt=”Globo rojo” width=”78” heigth=”100” style=”float:right; margin-left: 15px;”>



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*/

}


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*/

}



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


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>

CSS Flujo y posicionamientohtml.formacionatomica.com/assets/recursos/Flujo CSS.pdf · CSS Flujo y...

Documents

Transcript of CSS Flujo y posicionamientohtml.formacionatomica.com/assets/recursos/Flujo CSS.pdf · CSS Flujo y...