Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: Propiedad de posición
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada Ubicación Con sintaxis y ejemplos.
describir
La propiedad de posición de CSS define la posición de un elemento, normalmente las propiedades superior, derecha, inferior e izquierda determinarán la posición del elemento.
sintaxis
La sintaxis de la propiedad CSS de posición es:
position: value;parámetro o parámetro
valor
Reglas para el posicionamiento de elementos. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| estacionario | La posición normal del elemento (arriba, derecha, abajo e izquierda no tienen efecto) div {posición: estática;} |
| relativamente | Colocar el elemento en relación con su posición normal div { posición: relativa; arriba: 10px; izquierda: 15px; } |
| absoluto | Coloque el elemento absolutamente en relación con su contenedor. div {posición: absoluta; superior: 10 px; izquierda: 15 px; } |
| estable | Coloque los elementos en relación con la ventana gráfica de la pantalla y permanezca fijo en la pantalla mientras se desplaza div {posición: fijo; superior: 10px; izquierda: 15px; } |
| heredar | Indica que el elemento heredará la posición de su elemento padre div {posición: heredar;} |
notas
- Si la propiedad de posición se establece en relativa, absoluta o fija, puede establecer las propiedades superior, derecha, inferior e izquierda.
- Si la propiedad de posición se establece en estática, las propiedades superior, derecha, inferior e izquierda no se aplican.
- Consulte también las propiedades superior, derecha, inferior e izquierda.
Compatibilidad del navegador
La propiedad position de CSS tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- Firefox (Geco)
- Navegador de Internet (IE)
- Estático, Relativo, Absoluto: IE 4
- Corregido: IE 7
- ópera
- Safari (WebKit)
ejemplo
Discutiremos la propiedad de posición a continuación, explorando ejemplos de cómo usarla en CSS.
ubicación estática
Veamos un ejemplo de configuración de la ubicación estática.
CSS se ve así:
.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }
.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }
.totn2 { position: static; }HTML se ve así:
<div >
<div >Div 1 - prograrmaplus.com</div>
<div >Div 2 - prograrmaplus.com</div>
<div >Div 3 - prograrmaplus.com</div>
</div>El resultado se verá así:
En este ejemplo de posición de CSS, creamos 3 divs configurados para flotar a la izquierda y contenidos dentro de un div externo llamado totn_container. A cada uno de los 3 divs se le asigna una clase: totn1, totn2, totn3 respectivamente.
Luego establecemos la clase totn2 (es decir, el segundo div) en una posición estática. Dado que este es el comportamiento de posición predeterminado, nuestros resultados parecen como si no hubiéramos especificado un valor de posición. En otras palabras, es equivalente a este CSS:
.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }
.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }posición relativa
Veamos qué sucede si tratamos de establecer la propiedad de posición del segundo div en relativa.
CSS se ve así:
.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }
.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }
.totn2 { position: relative; top: 20px; left: 15px; }HTML se ve así:
<div >
<div >Div 1 - prograrmaplus.com</div>
<div >Div 2 - prograrmaplus.com</div>
<div >Div 3 - prograrmaplus.com</div>
</div>El resultado se verá así:
En este ejemplo de posición de CSS, configuramos la clase totn2 en una posición relativa, la propiedad superior en 20 píxeles y la propiedad izquierda en 15 píxeles. Esto significa que el elemento div (identificado por la clase totn2) se moverá 20 px hacia abajo y 15 px hacia la izquierda con respecto a su posición en el diseño normal (como en el primer ejemplo estático).
posición absoluta
Veamos qué sucede si tratamos de establecer la propiedad de posición del segundo div en absoluto.
CSS se ve así:
.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }
.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }
.totn2 { position: absolute; top: 20px; left: 15px; }HTML se ve así:
<div >
<div >Div 1 - prograrmaplus.com</div>
<div >Div 2 - prograrmaplus.com</div>
<div >Div 3 - prograrmaplus.com</div>
</div>El resultado se verá así:
En este ejemplo de posición de CSS, configuramos la clase totn2 en posición absoluta, la propiedad top en 20 px y la propiedad left en 15 px. Esto significa que el elemento div (identificado por la clase totn2) se moverá dentro de su contenedor principal a una posición absoluta de 20 px desde la parte superior del contenedor y 15 px desde el lado izquierdo del contenedor.
Entonces, en este ejemplo, el segundo div está en la parte superior del primer div (identificado por la clase totn1).
Posición fija
Veamos qué sucede si tratamos de establecer la propiedad de posición del segundo div en fijo.
CSS se ve así:
.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }
.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }
.totn2 { position: fixed; top: 20px; left: 15px; }HTML se ve así:
<div >
<div >Div 1 - prograrmaplus.com</div>
<div >Div 2 - prograrmaplus.com</div>
<div >Div 3 - prograrmaplus.com</div>
</div>El resultado se verá así:
En este ejemplo de posición de CSS, configuramos la clase totn2 en una posición fija, la propiedad superior en 20 píxeles y la propiedad izquierda en 15 píxeles. Esto significa que el elemento div (identificado por la clase totn2) se moverá dentro de la ventana gráfica de la pantalla a una posición fija de 20 píxeles desde la parte superior de la ventana gráfica y 15 píxeles desde la izquierda de la ventana gráfica.
Se ve muy similar al resultado del ejemplo de posición absoluta. La única excepción es que cuando nos desplazamos usando el ejemplo de posición fija, el segundo div (identificado por la clase totn2) permanecerá fijo en la ventana gráfica de la pantalla y no se desplazará fuera de la pantalla.