Posicionar un elemento HTML con respecto a su contenedor usando CSS

Debe establecer explícitamente la posición del contenedor padre junto con la posición del contenedor hijo. La forma típica de hacerlo es algo como esto:

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}

Sé que llego tarde, pero espero que esto ayude.

A continuación se muestran los valores de la propiedad position.

• estática
• fijo
• relativo
• absoluto

Posición: estática

Esto es por defecto. Significa que el elemento ocurrirá en una posición que normalmente ocurriría.

#myelem {
    position : static;
}

Posición : fijo

Esto establecerá la posición de un elemento con respecto a la ventana del navegador (viewport). A fijo el elemento positioned permanecerá en su posición incluso cuando la página se desplace.

(Ideal si desea el botón de desplazamiento hacia arriba en la esquina inferior derecha de la página).

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

Posición : relativa

Para colocar un elemento en una nueva ubicación relativa a su posición original.

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

El CSS anterior moverá el elemento #myelem 30px a la izquierda y 30px desde la parte superior de su ubicación real.

Posición: absoluta

Si queremos un elemento a colocar en una posición exacta en la página.

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

El CSS anterior colocará el elemento #myelem en una posición 30px desde arriba y 300px desde la izquierda en la página y se desplazará con la página.

Y finalmente...

Posición relativa + absoluta

Podemos establecer la propiedad position de un elemento padre en relative y luego establecer la propiedad position del elemento hijo en absolute. De esta manera podemos posicionar al niño en relación con el padre en una posición absoluta.

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

Podemos ver en la imagen de arriba el elemento #div-2 está situado en la esquina superior derecha dentro del elemento #container.

GitHub: Puedes encontrar el HTML de la imagen anterior aquí y CSS aquí.

Espero que este tutorial ayude.

El posicionamiento absoluto posiciona un elemento en relación con su antepasado posicionado más cercano. Así que pon position: relative en el contenedor, entonces para los elementos secundarios, top y left serán relativos a la parte superior izquierda del contenedor siempre y cuando los elementos secundarios tengan position: absolute. Más información está disponible en la especificación CSS 2.1 .

Si necesita colocar un elemento en relación con su elemento que lo contiene primero debe agregar position: relative al elemento contenedor . El elemento hijo que desea posicionar relativamente al elemento padre debe tener position: absolute. La forma en que funciona el posicionamiento absoluto es que se hace en relación con el primer elemento padre relativamente (o absolutamente) posicionado. En caso de que no exista un padre relativamente posicionado, el elemento se posicionará relativo a la raíz element (directamente al elemento HTML).

Así que si desea colocar su elemento hijo en la parte superior izquierda del contenedor padre, debe hacer esto:

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

Usted se beneficiará enormemente de leer este artículo . Espero que esto ayude!