Propiedades de Posicionamiento con Hojas de Estilo

El Posicionamiento en una Hoja de Estilo CSS

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.
Posicionamiento Hojas de Estilo CSS
Declaración de sentencia CSS

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:

Propiedades de Posicionamiento con Hojas de Estilo



Enlace para ver el ejemplo:

Enlace para descargar:

O utilizas el siguiente código:

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