pocisionamiento en css

Angelo Vargas Rico

Las hojas de estilo en cascada incorporan
múltiples formas para posicionar elementos
en la página, lo que comúnmente se conoce
como posicionamiento CSS.

Indica el tipo de posicionamiento de la capa. Puede tener
dos valores, relative o absolute.
.RELATIVE
Indica que la posición de la capa es
relativa a el lugar donde se estaba
escribiendo en la página en elmomento de escribir la capa con su
etiqueta

ABSOLUTE
Indica que la posición de la capa se
calcula con respecto al punto superior
izquierdo de la página.

Atributos para posicionamiento CSS2

ATRIBUTO POSITION

Va a permitir varios valores para
establecer cómo se posicionará
el elemento en la página y si
formará parte del
flujo normal de HTML.
Sus valores posibles son
absolute,fixed, relative, static e inherit.

Importancia

El flujo HTML es el modo en el que se van
colocando los componentes de la página, a
partir de cómo aparecen en el código HTML y
los atributos CSS de los elementos.

Atributos para posicionamiento CSS2

ATRIBUTOS TOP, LEFT, RIGHT, BOTTOM

Sirven para indicar la posición de un elemento, cuando éste
tiene los valores de position "absolute","relative" o "fixed"
(en otros valores del atributo position estos atributos son
ignorados).

TOP
Indica la distancia desde el
borde superior de la página
LEFT
Indica la distancia desde el
borde de la izquierda

También se puede indicar opcionalmente
la posición con
BOTTOM
que es la distancia desde abajo
RIGHT
que es la distancia desde la derecha.

Atributos paraposicionamiento CSS2

ATRIBUTOS FLOAT Y CLEAR

FLOAT sirve para establecer que un elemento tiene que "flotar",
colocándose los valores "right" o "left" para que floten a izquierda o
derecha.
CLEAR hace que el elemento se coloque en el primer área libre que
tenga al lugar donde se indique

FLOAT

CLEAR

Que los elementos floten es similar a lo que
pasa cuando definimos el atributo HTMLalign="right" o align="left" en las imágenes o
tablas.

Por ejemplo el valor de clear "right" hace que el elemento se
coloque en el primer lugar donde no tenga ningún elemento
flotando a la derecha. El valor de clear "both" hace que el
elemento se coloque donde no tenga elementos flotanto, tanto a
la derecha como a la izquierda.

Atributos para posicionamiento CSS2

ATRIBUTOS CLIP

Estableceun área de recorte de la porción visible de
un elemento.
Sirve para recortar determinadas áreas de la capa y que no se
puedan ver. Una capa que está visible se puede recortar para
que se vea, pero que no se vea algún trozo de esta.

Este área de recorte o cliping se establece por
medio de 4 valores
rect (, , , )

Atributos para posicionamiento CSS2

ATRIBUTO DISPLAY

Especifica eltipo de caja que debe que tener un elemento,
que puede ser de diversas formas.
Este atributo también tiene bastante utilización y entre los
valores más corrientes son
"none"
Hace que esa caja o elemento no aparezca en la página ni se reserve
espacio para ella.
"block“
Sirve para que la caja sea un bloque y se muestre en una línea o líneas
independientes de otros elementos de la página."inline“
Indica que esa caja tiene que mostrarse en la misma línea que otros
elementos escritos antes o después.

Atributos para posicionamiento CSS2

ATRIBUTOS OVERFLOW
Sirve en el modelado de cajas para indicar al
navegador qué es lo que debe hacer con el contenido
que no cabe dentro de una capa, según las
dimensiones que se le han asignado
Overflow permite que se recorte el contenidode una capa, para mostrar únicamente el contenido que
quepa, según sus dimensiones. Para acceder al contenido que no se muestra, porque no cabe en la capa,
se puede configurar overflow para que aparezcan unas barras de desplazamiento.

Atributos posibles con el atributo overflow

Visible Este valor indica que se debe mostrar todo el
contenido de la capa, aunque no quepa en tamaño
con la...