动态嵌入Facebook帖子时，如何在每个帖子上方添加文本元素？

问题分析 #

你当前的代码中，每个帖子的文本和iframe都被包裹在relativeContainer容器里，但这个容器没有设置position: relative样式。这导致带有position: absolute的文本元素会相对于**整个文档（或最近的有定位的祖先元素）**定位，而非各自的帖子容器，最终所有文本重叠在一起，无法对应到单个帖子上方。

修复方案 #

核心是给每个帖子的父容器添加相对定位，让绝对定位的文本以该容器为基准，再调整文本的显示位置。

修改后的完整代码 #

JavaScript（仅添加容器类名，核心逻辑不变）

// 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");
  // 给容器添加类名，用于设置相对定位样式
  relativeContainer.className = "post-item-container";

  postId = post.post_id;

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

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

  embedCode = `<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FIconicCool%2Fposts%2F${postId}&show_text=true&width=500" width="200" height="389" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" id=fb-post__${postId}></iframe>`;

  // Update the DOM
  iframeContainer.innerHTML = embedCode;

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

  additionalText.className = "post-top-text";
  additionalText.innerText = "additional text to append";

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

CSS（关键修改：添加容器相对定位，调整文本位置）

#facebook-feed-container {
  display: flex;
  flex-direction: row;
  row-gap: 1rem;
  column-gap: 3rem;
  padding: 1rem;
  flex-wrap: wrap; /* 可选：防止小屏幕下帖子溢出 */
}

/* 每个帖子的父容器，设置相对定位作为文本的定位基准 */
.post-item-container {
  position: relative;
  margin-bottom: 2rem; /* 给上方文本留出空间 */
}

.post-top-text {
  position: absolute;
  color: red;
  top: -2rem; /* 将文本定位到帖子容器的上方 */
  left: 0;
  width: 100%;
}

HTML（无需修改）

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div id="facebook-feed-container"></div>

原理说明 #

• position: relative会让post-item-container成为其子元素绝对定位的基准点
• post-top-text的top: -2rem会把文本定位到对应帖子容器的上方，确保每个文本都对应自己的帖子
• 每个帖子拥有独立的定位容器，彻底解决文本重叠问题

内容的提问来源于stack exchange，提问作者Mickey Vershbow