Tengo horas intentando como hacer para que las resdes sociales queden arriba (donde esta el circulo rojo) y no logro hacerlo. los coloque dentro de un contenedor, les coloco posicion: absolute; top: 0 y así es peor, ya que se salen del flujo. no entiendo xq se colocan abajo y no quedan arriba, todo es por la imagen que tengo al lado.
EDITADO: ES IMPORTANTE ACLARAR QUE ESTO ES PARA UNA PLANTILLA DE CORREO, POR TAL MOTIVO ESTOY USANDO HTML Y CSS PURO, SIN BOOTSTRAP NI NINGÚN OTRO FRAMEWORK, PARA EVITAR PROBLEMAS.
acá esta parte de mi código:
<tr>
<td>
<div style="width: 100%; display: inline-block; position: relative; text-align: center;">
<!-- <div style="width: 250px;"> -->
<!-- <div style="text-align: left; display: inline-block;"> -->
<!-- <div style="display: inline-block; cursor: pointer; padding: 0 5px;"> -->
<div style="height: 230px; width: 250px; display: inline-block;">
<div style="display: inline-block;width: 250px; text-align: center; ">
<a [href]="${config.link_api_whatsapp}" target="_blank"><img class="mr-1" style="width:40px; margin-top: 0px;" src="https://www.eldatodemiamiga.cl/assets/iconos/icono-whatsapp.png"></a>
<!-- </div> -->
<!-- <div style="display: inline-block; cursor: pointer; padding: 0 5px;"> -->
<a [href]="${config.link_facebook}" target="_blank"><img class="mr-1" style="width:40px" src="https://www.eldatodemiamiga.cl/assets/iconos/icono-facebook.png"></a>
<!-- </div> -->
<!-- <div style="display: inline-block; cursor: pointer; padding: 0 5px;"> -->
<a [href]="${config.link_instagram}" target="_blank"><img class="mr-1" style="width:40px" src="https://www.eldatodemiamiga.cl/assets/iconos/icono-instagram.png"></a>
</div>
</div>
<div style="display: inline-block; height: 230px; width: 250px; position: relative;">
<div style="position: absolute; text-align: height: 230px; width: 250px; ">
<img src="https://i.postimg.cc/Fs1pSp5w/Planets-Saturn-planet-Planetary-ring-519623-1920x1080.jpg" alt="imagen de packs" style="height: 100%; width: 100%;">
</div>
</div>
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
</div>
</td>
</tr>
y acá esta la imagen de como se ve ahora, y lo que quisero es que los 3 iconos de las redes sociales estén arriba (donde esta el ovalo rojo).
flexbox
no es aplicable para tu caso. También encontré esto.