En este artículo, aprenderemos cuál es la posición de un elemento en relación con su contenedor. La propiedad position en CSS informa sobre el método de posicionamiento de un elemento o una entidad HTML.
Hay cinco tipos diferentes de propiedades de posición disponibles en CSS:
- Corregido: cualquier elemento HTML con posición: la propiedad fija se colocará en relación con la ventana gráfica. Un elemento con posicionamiento fijo le permite permanecer en la misma posición incluso mientras nos desplazamos por la página. Podemos establecer la posición del elemento usando las teclas superior , derecha , inferior e izquierda.
- Estático: Este método de posicionamiento está configurado por defecto. Si no mencionamos el método de posicionamiento para ningún elemento, el elemento tiene la posición: método estático por defecto. Al definir estático, la parte superior, derecha, inferior e izquierda no tendrán ningún control sobre el elemento. El elemento se colocará con el flujo normal de la página.
- Relativo: un elemento con posición: relativo se posiciona relativamente con los otros elementos que se encuentran encima de él. Si configuramos su parte superior , derecha , inferior o izquierda , otros elementos no llenarán el espacio dejado por este elemento. Un elemento con su posición establecida en relativa y cuando se ajusta utilizando top , bottom , left y right se posicionará en relación con su posición original.
- Absoluto: Un elemento con posición: absoluto se posicionará con respecto a su ancestro no estático más cercano. El posicionamiento de este elemento no depende de sus hermanos o de los elementos que están al mismo nivel.
- Sticky: Elemento con posición: sticky y top: 0 juega un papel entre fijo y relativo en función de la posición donde se coloca. Si el elemento se coloca en el medio del documento, cuando el usuario se desplaza por el documento, el elemento adhesivo comienza a desplazarse hasta que toca la parte superior. Cuando toque la parte superior, se fijará en ese lugar a pesar de seguir desplazándose. Podemos pegar el elemento en la parte inferior, con la propiedad bottom .
¿Cuál es la posición de un elemento con respecto a su contenedor?
En palabras simples, significa establecer el elemento principal en relativo y convertir el elemento secundario en una posición absoluta. La suma de las posiciones relativas y absolutas establecerá al hijo en relación con su padre o también podemos decir que la posición de un elemento en relación con su contenedor.
Sintaxis:
position: fixed | static | relative | absolute | sticky;
Ejemplo 1: En el siguiente código, haremos uso de las propiedades relativas y absolutas para demostrar la solución a este problema.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
What is the Position of an element
relative to its container ?
</title>
<style>
.h1Class {
color: green;
}
.parent {
position: relative;
left: 0px;
top: 0px;
height: 150px;
background-color: lightgreen;
}
.child {
position: absolute;
left: 30px;
top: 40px;
background-color: green;
color: white;
}
</style>
</head>
<body style="text-align:center">
<h1 class="h1Class">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div class="parent">Parent
<div class="child">Child</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente código, haremos uso de las propiedades relativas y absolutas para demostrar la solución a este problema.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Position of an element
relative to its container ?
</title>
<style>
.h1Class {
color: green;
}
.parent {
position: relative;
left: 0px;
top: 0px;
height: 250px;
background-color: lightgreen;
}
.child1 {
position: absolute;
left: 30px;
top: 40px;
background-color: orange;
color: white;
}
.child2 {
position: absolute;
left: 60px;
top: 80px;
background-color: white;
color: black;
}
.child3 {
position: absolute;
left: 80px;
top: 120px;
background-color: blue;
color: white;
}
.child4 {
position: absolute;
left: 100px;
top: 160px;
background-color: green;
color: white;
}
</style>
</head>
<body style="text-align:center">
<h1 class="h1Class">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div class="parent">Parent
<div class="child1">Child-1</div>
<div class="child2">Child-2</div>
<div class="child3">Child-3</div>
<div class="child4">Child-4</div>
</div>
</body>
</html>
Producción:
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