Trabajos
Páginas: 6 (1415 palabras)
Publicado: 13 de marzo de 2013
CSS Posicionamiento de elementos.
Las propiedades de posicionamiento CSS permiten colocar un elemento. También se puede colocar un elemento detrás de otro, y especificar qué debe ocurrir cuando el contenido de un elemento es demasiado grande.
Los elementos se pueden colocar usando la parte superior, inferior, izquierda y propiedades adecuadas. Sin embargo, estas propiedades no funcionará amenos que la propiedad position se establece en primer lugar. También funcionan de forma diferente dependiendo del método de posicionamiento.
Hay cuatro métodos de posicionamiento diferentes.
Con posicionamiento CSS, se puede colocar un elemento en el lugar exacto que se quiera de la página. Junto con las flotaciones [propiedad float] (véase la lección 13), el posicionamiento proporciona muchasposibilidades de crear presentaciones avanzadas y precisas.
En esta lección analizaremos lo siguiente:
* Principios que rigen el posicionamiento CSS
* Posicionamiento absoluto
* Posicionamiento relativo
Principios que rigen el posicionamiento CSS
Imagina la ventana de un navegador como un sistema de coordenadas:
Los principios que rigen el posicionamiento CSS consisten en que sepuede colocar cualquier caja en cualquier lugar del sistema de coordenadas.
Digamos que queremos posicionar un título. Usando el modelo de caja (véase la lección 9) el título aparecerá así:
Si queremos posicionar la cabecera a 100 px del borde superior y a 200px del borde izquierdo del documento, tendríamos que escribir el siguiente código CSS:
h1 {
position:absolute;
top: 100px;
left:200px;
}
El resultado será el siguiente:
Como puedes observar, el posicionamiento con CSS es una técnica muy precisa a la hora de colocar elementos. Es mucho más sencillo que intentar usar tablas, imágenes transparentes o cualquier otra cosa.
Posicionamiento relativo.
Un elemento posicionado relativo está situado con relación a su posición normal.
Ejemplo:
h2.pos_left
{position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
El contenido de elementos en posición relativa puede ser movido y se superponen otros elementos, pero el espacio reservado para el elemento se conserva aún en el flujo normal.
Ejemplo
h2.pos_top
{
position:relative;
top:-50px;
}
Elementos en posición relativa a menudo se utilizan como bloques de contenedores para loselementos con posición absoluta.
Para posicionar un elemento de forma relativa, la propiedad position se establece como relative. La diferencia entre posicionamiento absoluto y relativo consiste en cómo se calcula la posicion.
La posición para un elemento que se posiciona de forma relativa se calcula desde la posición original en el documento.. Esto significa que se mueve el elemento hacia laderecha, la izquierda, arriba o abajo. De este modo, el elemento sigue ocupando espacio en el documento después de haberse posicionado.
Como ejemplo de posicionamiento relativo, podemos intentar posicionar tres imágenes de forma relativa respecto a su posición original en la página. Fíjate cómo las imágenes dejan espacios vacíos en sus posiciones originales en el documento:
#dog1 {position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}
Posicionamiento absoluto.
Un elemento posición absoluta está situado con relación al elemento padre primero que tiene una posición que no sea estática. Si no se encuentra dicho elemento, el bloque de contenciónes <html>:
Ejemplo
h2
{
position:absolute;
left:100px;
top:150px;
}
Elementos con posición absoluta se eliminan del flujo normal. El documento y otros elementos se comportan como el elemento con posición absoluta no existe.
Elementos con posición absoluta se pueden superponer otros elementos.
El elemento que se posiciona de forma absoluta no ocupa espacio alguno en el documento....
Las propiedades de posicionamiento CSS permiten colocar un elemento. También se puede colocar un elemento detrás de otro, y especificar qué debe ocurrir cuando el contenido de un elemento es demasiado grande.
Los elementos se pueden colocar usando la parte superior, inferior, izquierda y propiedades adecuadas. Sin embargo, estas propiedades no funcionará amenos que la propiedad position se establece en primer lugar. También funcionan de forma diferente dependiendo del método de posicionamiento.
Hay cuatro métodos de posicionamiento diferentes.
Con posicionamiento CSS, se puede colocar un elemento en el lugar exacto que se quiera de la página. Junto con las flotaciones [propiedad float] (véase la lección 13), el posicionamiento proporciona muchasposibilidades de crear presentaciones avanzadas y precisas.
En esta lección analizaremos lo siguiente:
* Principios que rigen el posicionamiento CSS
* Posicionamiento absoluto
* Posicionamiento relativo
Principios que rigen el posicionamiento CSS
Imagina la ventana de un navegador como un sistema de coordenadas:
Los principios que rigen el posicionamiento CSS consisten en que sepuede colocar cualquier caja en cualquier lugar del sistema de coordenadas.
Digamos que queremos posicionar un título. Usando el modelo de caja (véase la lección 9) el título aparecerá así:
Si queremos posicionar la cabecera a 100 px del borde superior y a 200px del borde izquierdo del documento, tendríamos que escribir el siguiente código CSS:
h1 {
position:absolute;
top: 100px;
left:200px;
}
El resultado será el siguiente:
Como puedes observar, el posicionamiento con CSS es una técnica muy precisa a la hora de colocar elementos. Es mucho más sencillo que intentar usar tablas, imágenes transparentes o cualquier otra cosa.
Posicionamiento relativo.
Un elemento posicionado relativo está situado con relación a su posición normal.
Ejemplo:
h2.pos_left
{position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
El contenido de elementos en posición relativa puede ser movido y se superponen otros elementos, pero el espacio reservado para el elemento se conserva aún en el flujo normal.
Ejemplo
h2.pos_top
{
position:relative;
top:-50px;
}
Elementos en posición relativa a menudo se utilizan como bloques de contenedores para loselementos con posición absoluta.
Para posicionar un elemento de forma relativa, la propiedad position se establece como relative. La diferencia entre posicionamiento absoluto y relativo consiste en cómo se calcula la posicion.
La posición para un elemento que se posiciona de forma relativa se calcula desde la posición original en el documento.. Esto significa que se mueve el elemento hacia laderecha, la izquierda, arriba o abajo. De este modo, el elemento sigue ocupando espacio en el documento después de haberse posicionado.
Como ejemplo de posicionamiento relativo, podemos intentar posicionar tres imágenes de forma relativa respecto a su posición original en la página. Fíjate cómo las imágenes dejan espacios vacíos en sus posiciones originales en el documento:
#dog1 {position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}
Posicionamiento absoluto.
Un elemento posición absoluta está situado con relación al elemento padre primero que tiene una posición que no sea estática. Si no se encuentra dicho elemento, el bloque de contenciónes <html>:
Ejemplo
h2
{
position:absolute;
left:100px;
top:150px;
}
Elementos con posición absoluta se eliminan del flujo normal. El documento y otros elementos se comportan como el elemento con posición absoluta no existe.
Elementos con posición absoluta se pueden superponer otros elementos.
El elemento que se posiciona de forma absoluta no ocupa espacio alguno en el documento....
Leer documento completo
Regístrate para leer el documento completo.