CSS

CSS Ubicación

<<< Efectos Visuales en CSS Contenido y Numeración automática >>>

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

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.

Código

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

<body>
<p>
<img src="v.gif" />
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. 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>
</html>

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

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

Código

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

<body>
<img src="v.gif" />
<img src="v.gif" />
</body>
</html>

Resultado

La propiedad vertical-align

Esta propiedad se usa para alinear verticalmente los elementos.

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" />
   </tr>
</table>

Resultado

Texto
texto
texto
texto
texto
texto
texto

Nota: en este ejemplo alineamos verticalmente el gráfico en la parte inferior(bottom) de la tabla.

Propiedades de la ubicación

Propiedad	Descripción	Valores	Detalles
position	Permite posicionar un elemento dentro de una página por medio de estos 4 métodos.	static	Estática
		relative	Relativa
		absolute	Absoluta
		fixed	Fija
top right bottom left	Desplazamiento de la caja(respecto al límite superior, derecho, inferior o izquierdo del contenedor).	longitud	Longitud
		%	Porcentaje
		auto	Automático
float	Posicionamiento flotante.	left	Izquierda
		right	Derecha
		none	Nada
clear	Control de cajas adyacentes a los float.	none	Nada
		left	Izquierda
		right	Derecha
		both	Ambas
vertical-align	Alineación vertical del texto.	baseline	Línea de referencia
		sub	Por debajo
		super	Super
		top	Por encima
		text-top	Texto superior
		middle	Medio
		bottom	Inferior
		text-bottom	Texto inferior
		longitud	Longitud
		%	Porcentaje
z-index	Solapamiento de niveles de capas.	entero con signo	Entero con signo
z-index	Solapamiento de niveles de capas.	auto	Automático