CSS Ubicación

Ubica todo o parte del contenido de tu página en el lugar que desees.


La propiedad position

Esta propiedad nos permite posicionar un elemento dentro de la página. Por lo general va acompañado de las propiedades: top, right, bottom y left.
Sus posibles valores son:

static (estático)
siempre tiene la ubicación que la página da por defecto.
relative (relativa)
mueve el elemento ralativamente de su posición normal.
absolute (absoluta)
posiciona al elemento con coordinadas relativas al bloque que lo contiene.
fixed (fija)
posiciona al elemento con coordinadas relativas a la ventana del navegador.

La propiedad float

La propiedad float define donde ubicar un texto o una imagen dentro de otro elemento. Solo puede ubicarlo a la derecha o a la izquierda del elemento.

Ejemplo

Vamos a posicionar una imagen a la derecha del texto.

Código
<head>
<style type="text/css">
img {float: right}
</style>
</head>

<body>
<p>En este ejemplo podemos observar como la imagen se sitúa a la derecha del texto. A pesar de la extensión del mismo, este rodeará a la imagen, tanto por el costado como por debajo de la misma.<img src="/v.gif" /> Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.</p>
</body>
Resultado

En este ejemplo podemos observar como la imagen se sitúa a la derecha del texto. A pesar de la extensión del mismo, este rodeará a la imagen, tanto por el costado como por debajo de la misma.V Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.


La propiedad clear

La propiedad clear no permite ubicar a los lados de una foto o texto, ningún otro elemento flotante.

Ejemplo

Vamos a ver el comportamiento de esta propiedad.

Código
<head>
<style type="text/css">
img{float: left; clear: both}
</style>
</head>

<body>
<img src="/v.gif" />
<img src="/v.gif" />
</body>
Resultado
V V

La propiedad vertical-align

La propiedad vertical-align se usa para alinear verticalmente los elementos.

Ejemplo

Vamos a aplicar un estilo a una lista.

Código
<table border="1" with="100%">
<tr>
<td>Texto<br>texto<br>texto<br>texto<br>texto<br>
texto<br>texto<br></td>
<td style="vertical-align:bottom"><img src="/v.gif"></td>
</tr>
</table>
Resultado
Texto
texto
texto
texto
texto
texto
texto
V
Nota: en este ejemplo alineamos verticalmente el gráfico en la parte inferior(bottom) de la tabla.

Propiedades de la ubicación

PropiedadDescripciónValoresDetallesEj.
position Permite posicionar un elemento dentro de una página por medio de estos 4 métodos. static Estática Ejemplo que demuestra que el valor static no afecta la posición de un elemento
relative Relativa Ejemplo que muestra como ubicar un elemento relativamente de su posición normal
absolute Absoluta Ejemplo que ubica un elemento de forma absoluta a la página
fixed Fija Ejemplo que ubica un elemento de forma fija en la página
top
right
bottom
left
Desplazamiento de la caja(respecto al límite superior, derecho, inferior o izquierdo del contenedor). longitud Longitud Ejemplo que utiliza diferentes unidades para ubicar un elemento
% Porcentaje Ejemplo que utiliza porcentajes para ubicar un elemento
auto Automático Ejemplo que utiliza el valor auto para ubicar un elemento
float Posicionamiento flotante. left Izquierda Ejemplo de como ubicar un elemento de forma flotante a la izquierda
right Derecha Ejemplo de como ubicar un elemento de forma flotante a la derecha
none Nada Ejemplo que utiliza el valor auto para ubicar un elemento
clear Control de cajas adyacentes a los float. none Nada Ejemplo que anula la propiedad clear
left Izquierda Ejemplo que no permite ubicar elementos flotantes a la izquierda del mismo
right Derecha Ejemplo que no permite ubicar elementos flotantes a la derecha del mismo
both Ambas Ejemplo que no permite ubicar elementos flotantes a ambos lados del mismo
vertical-align Alineación vertical del texto. baseline Línea de referencia Ejemplo que alínea verticalmente un elemento con el valor baseline
sub Por debajo Ejemplo que alínea verticalmente un elemento con el valor sub
super Super Ejemplo que alínea verticalmente un elemento con el valor super
top Por encima Ejemplo que alínea verticalmente un elemento por la parte superior de otro
text-top Texto superior Ejemplo que alínea verticalmente un texto en la parte superior de otro elemento
middle Medio Ejemplo que alínea verticalmente un elemento por el medio de otro
bottom Inferior Ejemplo que alínea verticalmente un elemento por la parte inferior de otro
text-bottom Texto inferior Ejemplo que alínea verticalmente un texto en la parte inferior de otro elemento
longitud Longitud Ejemplo que alínea verticalmente un elemento por medio de un valor en pixels
% Porcentaje Ejemplo que alínea verticalmente un elemento por medio de un valor en porcentajes
z-index Solapamiento de niveles de capas. entero con signo Entero con signo Ejemplo que posiciona una capa a un nivel más bajo que el texto
auto Automático Ejemplo que posiciona una capa al mismo nivel que el texto


<<< Efectos Visuales en CSS CSS y las Pseudo-Clases >>>

En la Web