En este artículo, aprenderemos cómo usar la propiedad de posición en CSS para alinear elementos. Podemos alinear elementos usando la propiedad de posición usando CSS con alguna propiedad auxiliar.
Enfoque: La propiedad position se utiliza para establecer la posición del elemento. Podemos alinear elementos usando la propiedad de posición con alguna propiedad auxiliar izquierda | derecho | parte superior | bottom , que se utiliza para establecer las coordenadas del elemento. Para alinear elementos usando la propiedad de posición , establecemos la posición del elemento y luego, usando la propiedad auxiliar, establecemos las coordenadas del elemento.
Sintaxis:
position: static | relative | absolute | fixed | sticky
Ejemplo 1: a continuación se muestra la implementación del enfoque anterior que alinea el elemento al centro.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.gfg-1{
color: green;
background-color: rgb(216, 216, 216);
}
.gfg-2{
background-color: rgb(199, 198, 198);
color: green;
/* Make element to relative to its normal position */
position: relative;
/* This set coordinates of the element and align it to center */
left: 600px;
}
</style>
</head>
<body>
<div class="gfg-1" style="height: 200px;font-size: 50px;">
GeeksforGeeks
</div>
<div class="gfg-2" style="height: 200px;font-size: 50px;">
GeeksforGeeks
</div>
</body>
</html>
Producción:
- Antes del posicionamiento:
Antes de posicionar
- Después del posicionamiento:
Después del posicionamiento
Ejemplo 2: La posición absoluta toma la posición según la página porque la posición absoluta toma la página como padre. Para hacerlo de acuerdo con el padre, tenemos que agregar relativo a la clase padre.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.gfg-1{
color: green;
background-color: rgb(216, 216, 216);
}
.gfg-2{
background-color: rgb(199, 198, 198);
color: green;
/* Make element to relative to its normal position */
position: absolute;
/* This set coordinates of the element*/
left: 0px;
}
.parent{
/* To make element relative */
position: relative;
}
</style>
</head>
<body>
<div class="parent" style="width: 50%;margin-left: 50px;">
<div class="gfg-1" style="height: 200px;font-size: 50px;">
GeeksforGeeks
</div>
<div class="gfg-2" style="height: 200px;font-size: 50px;">
GeeksforGeeks
</div>
</div>
</body>
</html>
Producción:
- Antes del posicionamiento:
Antes de posicionar
- Después del posicionamiento:
Después del posicionamiento
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA