- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
FAQs
General Tutorials
MonsterONE Subscrioption
CSS. Posicionamiento de elementos
diciembre 28, 2011
Este tutorial le ayudará a aprender la posición de CSS correctamente.
La propiedad de posición es utilizada para colocar un elemento en el lugar necesario en la pantalla. Vamos a ver qué opciones tenemos.
Estática
Los elementos HTML son colocados estáticamente de forma predeterminada (por defecto). Un elemento estático siempre se coloca de acuerdo con circulación normal de la página.
Los elementos estáticos no son afectados por las propiedades superiores, inferiores, izquierdos y derechos.
No hay necesidad de especificar la posición estática en el fichero CSS menos que sea necesario restablecer otro valor de posición, que fue configurado abtes.
div.a{
position:static;
}
Relativa
Un elemento relativo se coloca con relación a su posición normal. Puede afectar a la posición del elemento mediante las propiedades "top" y "left".
div.b{
position:relative;
top:20px;
left:20px;
}
El contenido de los elementos relativos puede ser movido y colocado encima de otros elementos, pero el espacio reservado para el elemento se queda en circulación normal.
Los elementos relativos son generalmente utilizados como bloques principales (parent blocks) de los absolutos.
Absoluta
Un elemento de posición absoluta se coloca con relación al primero elemento principal (parent) que tiene una posición no estática. Si no se encuentra este elemento, el bloque de contenido es <html>.
div.c{
position: absolute;
top:20px;
left:20px;
}
La siguiente imagen muestra el funcionamiento de div con la clase "c" y en posición absoluta en caso de que se coloca en div con la clase "b" y en posición relativa.
<div class="b"> <div class="c"></div> </div>
A continuación puede encontrar el ejemplo cuando el elemento en posición absoluta no tiene una posición relativa.
Fija
Un elemento con posición fija se coloca con relación a la ventana del navegador. No se mueva, incluso si la ventana se desplaza.
div.c{
position: fixed;
top:20px;
left:20px;
}
Los elementos fijos son quitados de la circulación normal. El documento y otros elementos fucnionan como si el elemento fijo no exista.
Usted puede aprender más sobre el posicionamiento de los elementos del siguiente artículo
