La propriedad position especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, fijo, absoluto o pegajoso).
Hay cinco valores de posición diferentes:
- static
- relative
- fixed
- absolute
- sticky
posición: estática;
Los elementos HTML se colocan estáticos de forma predeterminada.
Los elementos posicionados estáticos no se ven afectados por las propiedades superior, inferior, izquierda y derecha.
Un elemento con la propriedad position: static; no esta posicionado de ninguna manera especial
pero se posiciona conforme el flujo de la pagina
...
Codigo del ejemplo
div.static {
position: static;
border: 3px solid #73AD21;
}
posición: relativa;
un elemento con position: relative; se coloca en relación con su posición normal.
Establecer las propiedades superior, derecha, inferior e izquierda de un elemento relativamente posicionado causará que se ajuste lejos de su posición normal.
El resto del contenido no se ajustará para encajar en ningún espacio dejado por el elemento.
ejemplo del codigo
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
posición: fija;
un elemento con position: fixed; se coloca en relación con la ventana gráfica, lo que significa que siempre permanece en el mismo lugar incluso si se desplaza la página. La parte superior, Las propiedades derecha, inferior e izquierda se utilizan para colocar el elemento.
Un elemento fijo no deja un espacio en la página donde normalmente habría estado ubicado.
ejemplo del codigo
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
posición: absoluta;
un elemento con position: absolute; está posicionado en relación con el antepasado posicionado más cercano (en lugar de posicionarse en relación con la ventana gráfica, como fijo).
Sin embargo; si un elemento posicionado absoluto no tiene ancestros posicionados, utiliza el cuerpo del documento y se mueve junto con el desplazamiento de la página.
Nota: Los elementos de posición absoluta se eliminan del flujo normal y pueden superponerse a los elementos.
ejemplo
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
posición: pegajosa; (sticky)
un elemento con position: sticky; se posiciona en función de la posición de desplazamiento del usuario.
Un elemento fijo alterna entre relative y fixed, dependiendo de la posición de desplazamiento. Se coloca en relación hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica; luego, se "pega" en su lugar (como posición: fija).
Un elemento fijo alterna entre relative y fixed, dependiendo de la posición de desplazamiento. Se coloca en relación hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica; luego, se "pega" en su lugar (como posición: fija).
Try to scroll inside this frame to understand how sticky positioning works.
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Nota: Internet Explorer no admite el posicionamiento fijo. Safari requiere un -webkit- prefijo (ver ejemplo a continuación). También debe especificar al menos uno de top, right, bottomo leftpor posicionamiento pegajoso para trabajar.
ejemplo de codigo
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Posicionamiento de texto en una imagen
Ejemplo
Codigo del ejemplo anterior
<div >
<div style="position:relative;text-align:center;">
<img src="https://cdn.pixabay.com/photo/2021/12/22/21/02/natureza-6888236_960_720.jpg" alt="Cinque Terre"
style="width:100%;height:auto;opacity:0.3">
<div style="position:absolute;bottom:8px;left:16px;font-size:18px">Bottom Left</div>
<div style="position:absolute;top:8px;left:16px;font-size:18px">Top Left</div>
<div style="position:absolute;top:8px;right:16px;font-size:18px">Top Right</div>
<div style="position:absolute;bottom:8px;right:16px;font-size:18px">Bottom Right</div>
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:18px">Centered
</div>
</div>
</div>
propiedades de posicionamiento CSS
| Propriedad | Descricion |
|---|---|
| bottom | Establece el borde del margen inferior para un cuadro posicionado |
| clip | Recorta un elemento absolutamente posicionado |
| left | Establece el borde del margen izquierdo para un cuadro posicionado |
| position | Especifica el tipo de posicionamiento para un elemento. |
| right | Establece el borde del margen derecho para un cuadro posicionado |
| top | Establece el borde del margen superior para un cuadro posicionado |
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias