Presentacion Posicionamiento CSS

POSICIONAMIENTO EN CSS

Autor/a: Jose Sánchez, 1ºDAM B

01

position

01.Position

Position

Tenemos 4 principales atributos dentro de position: Static: Viene por defecto, el elemento sigue el flujo normal del documento. No responden a "Top, Right, Left, Bottom" Relative: Se posiciona respecto a su posición normal en el flujo. Responden a "Top, Right, Left, Bottom" Absolute:Se posiciona respecto al contenedor más cercano que tenga "absolute" o "fixed" Fixed: Se posiciona relativo a la ventana del navegador, no se mueve si scrolleas

02

top/right/left/bottom

02.top/right/left/bottom

top/right/left/bottom

Top: Define la distancia desde el borde superior del contenedor. Right: Define la distancia desde el borde derecho del contenedor. Bottom: Define la distancia desde el borde inferior del contenedor. Left: Define la distancia desde el borde izquierdo del contenedor.

TOP

Left

Right

Bottom

03

Display y z-index

03.display y z-index

Display

La propiedad display controla cómo se muestra un elemento en el flujo del documento. -Block: El elemento ocupa toda la linea -Inline e Inline-block:El elemento ocupa solo el espacio de su contenido, inline-block permite establecer propiedades como width y height -none: Oculta el elemento completamente -flex: Convierte un contenedor en un contenedor flexbox.

Block

Inline

None

03.display y z-index

z-index

Añade profundidad (eje z) a elementos "position". Los valores son: Positivos, negativos o auto.

04

Float y clear

04.Float y clear

Float

Permite colocar un elemento a un lado de su contenedor y hacer que el texto u otros elementos lo rodeen. -Left: Lo alinea a la izquierda -Right: Lo alinea a la derecha -None: Elimina los flotados aplicados

Float ejemplo 100px left

04.Float y clear

Clear

Evita que un elemento se sitúe junto a elementos float. left: Evita flotar a la izquierda. right: Evita flotar a la derecha. both: Evita flotar a ambos lados. none: No afecta el comportamiento del flotado

Sin clear

Clear

05

overflow

05.overflow

overflow

El overflow en CSS es una propiedad utilizada para gestionar cómo se muestra el contenido que excede el tamaño del contenedor en el que está contenido Visible: El contenido desbordado se muestra fuera de los límites del contenedor. No se corta ni se oculta. Hidden: Oculta el contenido que excede los límites del contenedor. No hay barras de desplazamiento. Scroll y auto: Siempre agrega barras de desplazamiento (horizontal y/o vertical), incluso si el contenido cabe dentro del contenedor. Auto solo las agrega si el contenido no cabe Clip: El contenido se corta al tamaño del contenedor, pero no se pueden hacer desplazamientos para ver el contenido oculto.

Ejercicio

Pon una imagen, posicionada a la derecha, que como display ocupe toda la línea, y que tenga float a la izquierda pero impida float a la derecha. Añade overflow para poder scrollear