Posicionamiento en una hoja de estilo - Blog de Tecnologia, Ingenieria en Sistemas

Novedades

miércoles, 22 de febrero de 2012

Posicionamiento en una hoja de estilo

Propiedades del Posiscionamiento con Hojas de Estilo.

El posicionamiento en una hoja de estilo hace referencia al lugar (coordenadas) que puede ocupar cualquier contenido de una caja dentro de una página web.  Proporcionan al diseñador un dominio total de la estructura de la página sin necesidad de recurrir al uso de tablas, obteniendo así una buena organización del código HTML o XHTML.

Para trabajar con posiciones dentro de una página web se utiliza la propiedad position esta puede tomar los siguientes valores:

“position: static”: es el valor predefinido por defecto de todos los elementos HTML. Los elementos se van colocando uno a continuación de otro, cuando se utiliza este valor.

“position: absolute”: permite colocar la posición de una caja en cualquier punto de la página de manera completamente independiente de los demás elementos, los cuales pueden además superponerse por encima o por debajo.

“position: relative”: desplaza una caja respecto de su posición original.

La propiedad desplazamiento de la caja se controla con las propiedades top, right, bottom y left, cabe destacar que para el valor static las propiedades anteriores no se utilizan.
 

Ejemplo:


Codigo

 <html>
  <head>
  <title>Uso de las etiquetas de posicionamiento</title>
  <link type="text/css" rel="stylesheet" href="miCSS.css" />

  <style type="text/css">
                }
                .estatico{
                position: static
                background-color:yellow;
                }
                .absoluto{
                position:absolute; 
                left:50px; 
                top:400px;
                background-color:yellow;
                }
                .relativo{
                position: relative;
                left:300px; 
                top:50px;
                background-color:yellow;
                }
  </style>
  </head>
 
  <body>
  <div id="head" class="cabecera">
  <h1>EJEMPLO DE POSICIONAMIENTO CON CSS</h1>
  </div>

  <div id="estatico" class="estatico">
  </div>
 
<div id="absoluto" class="absoluto">
</div>
 
  <div id="relativo" class="relativo">
  </div>

  </body>
</html>


No hay comentarios:

Publicar un comentario

Gracias por su comentario