CSS/Добавьте верхний край во встроенную запись Facebook ⇐ CSS

[Anonymous]

У меня есть веб-сайт HTML/CSS/JS, куда я встраиваю сообщения Facebook и добавляю текст (с различной информацией и кнопками действий) вверху каждого сообщения. Я добавляю текст, который находится над каждым сообщением, динамически в Javascript, так что встроенное сообщение (iframe) находится в отдельном контейнере, а не текст, который находится над ним.
Как вы можете см. на изображении ниже, текст позиционируется как абсолютный, поэтому он отображается над публикацией, а не рядом с ней. Однако я не могу заставить сообщение переместиться вниз, а текст - вверх, чтобы создать некоторое разделение между ними. Буду очень признателен за любую помощь или идеи!!
ОБНОВЛЕНИЕ: я хотел включить код, который воспроизводит проблему с минимальным кодом: https://codepen.io/Mickey_Vershbow/pen/dyLzLNV ?editors=1111
Код также смотрите ниже:

Код: Выделить всё

// Array of facebook post ID's
facebookArr = [{
post_id: "pfbid0cm7x6wS3jCgFK5hdFadprTDMqx1oYr6m1o8CC93AxoE1Z3Fjodpmri7y2Qf1VgURl"
},
{
post_id: "pfbid0azgTbbrM5bTYFEzVAjkVoa4vwc5Fr3Ewt8ej8LVS1hMzPquktzQFFXfUrFedLyTql"
}
];

// Variables to store post ID, embed code, parent container
let postId = "";
let embedCode = "";
let facebookContainer = document.getElementById("facebook-feed-container");
$(facebookContainer).empty();

// Loop through data to display posts
facebookArr.forEach((post) => {
let relativeContainer = document.createElement("div");

postId = post.post_id;

postLink = `${postId}/?utm_source=ig_embed&utm_campaign=loading`;

// ---> UPDATE: separate container element
let iframeContainer = document.createElement("div");

embedCode = `
https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FIconicCool%2Fposts%2F${postId}&show_text=true&width=500
`;

// Update the DOM
iframeContainer.innerHTML = embedCode;

// ADDITIONAL TEXT
let additionalText = document.createElement("div");

additionalText.className = "absolute";
additionalText.innerText = "additional text to append";

relativeContainer.append(additionalText, iframeContainer);
facebookContainer.append(relativeContainer);
});

Код: Выделить всё

#facebook-feed-container {
display: flex;
flex-direction: row;
row-gap: 1rem;
column-gap: 3rem;
padding: 1rem;
}

.absolute {
position: absolute;
margin-bottom: 5rem;
color: red;
}

.risk-container {
margin-top: 3.5rem;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/782 ... ebook-post