La propiedad position se usa para alinear los diferentes elementos en la página HTML. La propiedad de posición juega un papel importante para hacer páginas web de alta calidad.
Clases usadas:
- static: esta clase se utiliza para posicionar elementos de acuerdo con el flujo normal de la página.
- relativo: En este caso, el elemento permanece en el flujo normal del documento pero con los efectos de izquierda, derecha, arriba y abajo. Los elementos se desplazan de su posición original en el documento creando espacio vacío y otros elementos pueden ajustarse según el espacio vacío dejado por el elemento.
- absoluto: los elementos absolutos no siguen el documento de flujo normal, sino que se posicionan en relación con el ancestro más cercano posicionado. Su posición final se determina usando arriba, abajo, izquierda y derecha.
- corregido: el elemento fijo no sigue el flujo normal del documento y se posiciona en relación con la etiqueta <HTML>. Este elemento siempre se pega a la pantalla.
Sintaxis:
<element-name class="class-name">
...
</element-name>
Ejemplo 1: En el siguiente código, haremos uso de las clases anteriores para demostrar la propiedad de posición .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
body {
text-align:center;
margin:12px;
}
.gfg_relative {
height: 2000px;
width: 200px;
color: black;
font-size: 1.5rem;
font-family: sans-serif;
padding: 10px;
background-color: lightgrey;
margin-left:230px;
}
.gfg_fixed {
top: 200px;
left: 290px;
padding: 10px;
font-size: 1rem;
color: lightgreen;
height: 100px;
width: 100px;
background-color: green;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3><br>
<div class="relative gfg_relative">
relative class
<div class="fixed gfg_fixed">
fixed class
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente código, haremos uso de las clases anteriores para demostrar la propiedad de posición .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
body {
text-align:center;
margin:12px;
}
.gfg_static {
height: 200px;
width: 200px;
color: black;
font-size: 1.5rem;
padding: 10px;
background-color: lightgreen;
}
.gfg_absolute {
bottom: 10px;
left: 70px;
font-size: 1.5rem;
padding: 10px;
height: 100px;
width: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3><br>
<div class="static gfg_static">
static class
<div class="absolute gfg_absolute">
absolute class
</div>
</div>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/layout/position/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA