Demo Tienda Virtual Tutorcar

Navegacion->Inicio | Tutorial de CSS

La web de los recursos y ejemplos de asp

Tutorial elaborado por Jorge Luna Rivero
http://www.geocities.com/SiliconValley/Sector/5005
lunamatic@yahoo.com

PARTE III

Colocación de bloques usando CSS.

1. Introducción al posicionamiento (o colocación) de bloques.
2. Tipos de posicionamiento.
Especificando la posición las propiedades "left" y "top".
Colocación absoluta.
Colocación relativa.
Combinaciones.
Altura y ancho de un bloque, las propiedades "width" y "height".
3. Control de ciertos aspectos de los bloques.
Orden de colocación, la propiedad "z-index".
Control del sobreflujo, la propiedad "overflow".
Visibilidad, la propiedad "visibility".
4. Ejemplos de las propiedades tratadas en este capítulo.
Ejemplo de Colocación absoluta.
Ejemplo de Colocación relativa.
Ejemplo del orden de colocación "z-index".
Ejemplo del manejo del sobreflujo.
5. Fin de este capítulo.
Puntos a recordar para la colocación de bloques.

1. Introducción al posicionamiento (o colocación) de bloques.

Uno de los aspectos mas importantes de las hojas de estilo es el hecho de que a través de estas es posible colocar un bloque de texto en casi cualquier lugar de un documento HTML, sin importar que dicho bloque quede fuera del flujo del texto o que encime otro bloque del documento. Lo anterior es la base de la implementación estándar del HTML dinámico, que combina el posicionamiento de bloques con la facultad que tienen las hojas de estilo de ser modificadas a través de algún lenguaje de programación web. No trataremos esto último ya que relativamente no es tan sencillo además de que seria necesario un curso dedicado.

2. Tipos de posicionamiento.

Básicamente existen dos tipos de posicionamiento, el posicionamiento absoluto y el posicionamiento relativo.

El posicionamiento absoluto permite colocar un bloque de texto en cualquier parte del documento sin importar el flujo del texto, este posicionamiento toma como referencia la esquina superior izquierda del elemento padre del bloque.

El posicionamiento relativo conserva el bloque en el flujo normal del texto y solo es posible definir la distancia de los bordes superior e izquierdo al elemento mas cercano.

Para definir el tipo de posicionamiento o colocación de un bloque se usa la propiedad "position" con uno de dos valores: "absolute" para colocación absoluta, "relative" para colocación relativa.

Ejemplo:

ESTILO {position:absolute;}

ESTILO {position:relative;}

Cabe mencionar que cuando hablamos de bloque nos referimos a la parte del documento donde se aplica un estilo usando los tags <DIV> y <SPAN>.

2.1 Especificando la posición las propiedades "left" y "top".

Como lo mencionamos en ambos tipos de colocación (relativa o absoluta) la posición del bloque se define con respecto a los bordes izquierdo y superior del mismo, esto se hace usando las propiedades "left" y "top".

La tabla siguiente explica estas dos propiedades.

Propiedad Valor posible Ejemplo Significado de la propiedad.

top En ambos casos una cantidad especificada usando una unidad relativa o absoluta o la palabra "auto" que es equivalente a no usar la propiedad. top:0px; Define la distancia entre el borde superior del bloque que se colocará y el borde superior de su elemento padre.

left left:230px; Define la distancia entre el borde izquierdo del bloque que se colocará y el borde izquierdo de su elemento padre.

Estas dos propiedades se usan junto con la propiedad "position" ya que no trabajan por si solas.

Un ejemplo de uso es:

<STYLE type="text/css">
#mibloque{position:absolute; top:20px; left:25px;}
</STYLE>

Si la definición de estilo anterior se aplicara a un bloque seria interpretada de la siguiente forma:

En el caso de la colocación absoluta no importa que el bloque una vez colocado quede encima de otro bloque.

2.2 Colocación absoluta.

La colocación absoluta como lo hemos venido mencionando se establece a partir de usar la propiedad "position" con el valor "absolute".
Esta colocación se hace con respecto la distancia entre los bordes izquierdo y superior del elemento al que se aplica el estilo y su elemento padre.

2.3 Colocación relativa.

Este tipo de colocación se considera relativa porque se toma como referencia el lugar que le correspondería al elemento al que se aplica el estilo si este se conservara en el flujo normal del texto.
La colocación relativa se establece usando la propiedad "position" con el valor "relative".
En este caso la posición se define a través de la distancia que existe entre los bordes izquierdo y superior del elemento al que se aplica el estilo y el elemento mas cercano en el flujo del texto.

Ejemplo:

#tubloque{position:relative; top:30px; left:40px;}

</STYLE>

Si el estilo anterior se aplicara a un bloque se vería así en un navegador.

2.4 Combinaciones.

Es posible que existan elementos con colocación absoluta anidados dentro de un elemento con colocación relativa o que haya elementos con colocación relativa anidados dentro de un elemento con colocación absoluta.

Por ejemplo:

<STYLE type="text/css">
#miestilo{position:relative; top:12px; left;12px;}
#tuestilo{position:absolute; top:20px; left:15px;}
</STYLE>

Los estilos definidos se aplicarían en un documento así:

<SPAN id="miestilo">
Mi estilo <DIV id="tuestilo">Tu estilo</DIV>
</SPAN>

Al ser interpretados se verían así:

2.5 Altura y ancho de un bloque, las propiedades "width" y "height".

Es posible especificar el ancho y la altura de un bloque, esto se hace utilizando las propiedades "height" y "width", estas propiedades se usan de la forma que mencionamos en el capítulo anterior, por ejemplo:

#miestilo{position:absolute; top:20px; left:20px; height:60px; width:60px;}

Si el estilo se aplicara a un bloque en un documento se vería así:

Como estas propiedades ya se mencionaron en el capítulo anterior solo mencionaremos que en Netscape Communicator y Microsoft Internet Explorer 4 el valor por default de estas propiedades es 100%, en Internet Explorer 5 el valor por default es "auto" que significa que el ancho del bloque se ajustará a su contenido.

3. Control de ciertos aspectos de los bloques.

3.1 Orden de colocación, la propiedad "z-index".

Como lo hemos venido mencionando es posible encimar varios bloques de texto, para controlar que bloque quedara al frente de los otros bloques se usa la propiedad "z-index" que se basa en la convención que el eje "z" es el eje que va del monitor al usuario, por lo que un bloque con un "z-index" mayor se coloca adelante de aquel bloque cuyo "z-index" sea menor.

La propiedad "z-index" solo puede tener valores numéricos enteros relativos al orden de colocación como lo hemos mencionado un valor mayor sitúa al bloque adelante de los bloques cuyo "z-index" sea menor, por ejemplo:

#miestilo{position:absolute; z-index:20;}

3.2 Control del sobreflujo, la propiedad "overflow".

Es lógico que cuando se define un bloque de cierto tamaño su contenido puede exceder el tamaño del bloque, para controlar la conducta que tomará el browser se usa la propiedad "overflow" con uno de cuatro valores posibles: "hidden", "visible", "auto", "scroll". A continuación una tabla explica el significado de cada valor.

Valor	Ejemplo	Significado
"hidden"	overflow:hidden;	En este caso se indica que cuando el contenido del bloque exceda el tamaño de este debe ocultarse todo lo que quede fuera de las dimensiones del bloque.
"visible"	overflow:visible;	En este caso se indica que cuando el contenido del bloque exceda el tamaño especificado para este, se deberá modificar la altura o anchura del bloque como se requiera.
"auto"	overflow:auto;	En este caso cuando el contenido exceda las dimensiones del bloque, el browser debe mostrar barras de desplazamiento para poder visualizar el sobreflujo.
"scroll"	overflow:scroll;	En este caso sin importar que haya o no sobreflujo el bloque mostrara barras de desplazamiento.

La propiedad "overflow" es posible que solo trabaje con todos los valores mencionados en Microsoft Internet Explorer 5.0, en Communicator 4.x y algunas versiones de IE 4.0 no funcionan los valores "auto" y "scroll".

3.3 Visibilidad, la propiedad "visibility".

Esta propiedad permite hacer que un bloque sea visible o que este oculto, solo tiene dos valores posibles la palabra "visible" para un bloque visible y "hidden" para un bloque oculto.

En condiciones normales esta propiedad no tiene gran utilidad, su utilidad solo se aprecia cuando se usa un lenguaje de programación web para hacer DHTML.

4. Ejemplos de las propiedades tratadas en este capítulo.

Los siguientes ejemplos muestran las diferentes propiedades tratadas en este capítulo:

4.1 Ejemplo de Colocación absoluta.

<HTML>

<HEAD>

#bloque1{position:absolute; color:white; top:25px; left:50px;

height:150; width:100; background-image:url(greenmar.gif);}

#bloque2{position:absolute; color:yellow; top:150px; left:150px;

height:150; width:200; background-image:url(greenmar.gif);}

</STYLE>

</HEAD>

<BODY>

<DIV id="bloque1"> Bloque 1 usando el estilo llamado "bloque1"</DIV>

<DIV id="bloque2">Bloque 2 usando el estilo llamado "bloque2"</</DIV>

</BODY></HTML>

Para ver este ejemplo haga click aquí.

4.2 Ejemplo de Colocación relativa.

<HTML>

<HEAD>

#bloque1{position:relative;

top:20px; left:20px;

height:100; width:100;

background-color:#ffeeee;}

#bloque2{position:relative;

top:15px; left:70px;

height:150; width:150;

background-color:#eeeeff;}

</STYLE>

</HEAD>

<BODY>

Flujo del texto, flujo del texto, flujo del texto,

<SPAN id="bloque1"> Bloque 1 con posición relativa al flujo del texto</SPAN>

Flujo del texto, <BR> flujo del texto, flujo del texto, flujo del texto,

<SPAN id="bloque2">Bloque 2 con pocisión relativa al flujo del texto</</SPAN>

flujo del texto, flujo del texto,

</BODY>

</HTML>

Para ver este ejemplo haga click aquí.

4.3 Ejemplo del orden de colocación "z-index".

<HTML>

<HEAD>

#bloque1{position:absolute;

top:20px; left:20px;

height:70; width:300;

z-index:1; font-family:helvetica;

font-size:17pt; color:red;}

#bloque2{position:absolute;

top:30px; left:30px;

height:70; width:300;

z-index:4; font-family:Comic Sans MS;

font-size:18pt; color:blue;}

#bloque3{position:absolute;

top:40px; left:40px;

height:70; width:300;

z-index:2; font-weight:bold;

font-size:19pt; color:olive;}

#bloque4{position:absolute;

top:50px; left:50px;

height:70; width:300;

z-index:3; font-style:italic; font-weight:bold;

font-size:16pt;}

</STYLE>

</HEAD>

<BODY>

<SPAN id="bloque1">Bloque 1 con "z-index" 1</SPAN>

<SPAN id="bloque2">Bloque 2 con "z-index" 4</SPAN>

<SPAN id="bloque3">Bloque 3 con "z-index" 2</SPAN>

<SPAN id="bloque4">Bloque 4 con "z-index" 3</SPAN>

</BODY>

</HTML>

Para ver este ejemplo haga click aquí.

4.4 Ejemplo del manejo del sobreflujo.

<HTML>

<HEAD>

#bloque1{position:absolute;

top:20px; left:20px;

height:100; width:100;

overflow:visible;

font-family:helvetica;

font-size:10pt; color:red;

background-color:#eeeeee;}

#bloque2{position:absolute;

top:20px; left:200px;

height:100; width:100;

overflow:hidden;

font-family:Comic Sans MS;

font-size:10pt; color:blue; background-color:#ffffee;}

#bloque3{position:absolute;

top:200px; left:20px;

height:100; width:100;

overflow:auto;

font-weight:bold; font-size:10pt; color:olive;

background-color:#eeffff;}

#bloque4{position:absolute;

top:200px; left:200px;

height:100; width:100;

overflow:scroll;

font-weight:bold; font-size:10pt;

background-color:#ffeeee;}

</STYLE>

</HEAD>

<BODY>

Sobreflujo visible, sobreflujo visible, sobreflujo visible.

</SPAN>

Sobreflujo oculto, sobreflujo oculto, sobreflujo oculto.

sobreflujo oculto, sobreflujo oculto, sobreflujo oculto.

</SPAN>

Sobreflujo controlado con auto, sobreflujo controlado con auto,

sobreflujo controlado con auto, sobreflujo controlado con auto,

sobreflujo controlado con auto, sobreflujo controlado con auto.

</SPAN>

Sobreflujo controlado usando "scroll".

</SPAN>

</BODY>

</HTML>

Para ver este ejemplo haga click aquí.

5. Fin de este capítulo.

5.1 Puntos a recordar para la colocación de bloques.

Para la colocación de bloques la definición del estilo de este debe ser particular, ya que como es lógico no es posible que mas de un bloque tenga el mismo valor al mismo tiempo en las propiedades "top", "left", "z-index" y "visibility".
Los estilos se deben aplicar usando los tags <DIV> o <SPAN>, y como se trata de estilos particulares se debe usar el atributo "id" dentro del tag.
Las propiedades usadas en los estilos deben estar bien escritas de lo contrario se ignorarán.
La propiedad "overflow" no funciona con los valores "auto" y "scroll" en ninguna versión de Netscape Communicator hasta la 4.5 y en algunas versiones de Microsoft Internet Explorer 4.0.

No olvide consultar la apéndice donde se incluyen algunos de los "bugs" (errores de programación), trucos y trampas de los browsers que soportan CSS.

Las propiedades de este capítulo son la base de la implementación estándar del HTML dinámico, ya que todas son modificables a través de algún lenguaje de scripts como Javascript.

A pesar de que no tratamos el HTML dinámico en este curso las propiedades tratadas en este capítulo tienen mucha utilidad aun sin tomar en cuenta sus aspectos dinámicos.

Volver al sumario de este capítulo.