如何调整绝对定位文本与嵌入Facebook帖子的间距并添加上边距？

问题核心 #

使用position: absolute定位的文本容器会脱离正常文档流，父容器无法感知它的存在，因此iframe不会自动下移；同时你设置的margin-bottom对绝对定位元素无效，无法拉开两者间距。

修正步骤 #

• 给每个帖子的父容器（relativeContainer）设置position: relative，让绝对定位的文本以父容器为基准定位，避免全局偏移。
• 给父容器添加padding-top，或者给iframe容器添加margin-top，预留出文本的高度空间，确保iframe不会和文本重叠。
• 用top属性调整绝对定位文本的位置，替代无效的margin-bottom。

修改后的完整代码 #

HTML #

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

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

CSS #

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

/* 父容器设置相对定位并预留文本空间 */
.post-wrapper {
  position: relative;
  padding-top: 2rem;
}

.absolute {
  position: absolute;
  top: 0; /* 定位到父容器顶部 */
  color: red;
}

JavaScript #

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

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

// Loop through data to display posts
facebookArr.forEach((post) => {
  const relativeContainer = document.createElement("div");
  relativeContainer.className = "post-wrapper"; // 添加父容器类

  postId = post.post_id;

  // 单独的iframe容器
  const 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>`;

  // 更新DOM
  iframeContainer.innerHTML = embedCode;

  // 额外文本容器
  const additionalText = document.createElement("div");
  additionalText.className = "absolute";
  additionalText.innerText = "additional text to append";

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

补充说明 #

如果文本内容高度不固定，可以用JavaScript获取文本容器的高度，再动态设置父容器的padding-top值，确保适配不同长度的文本内容。

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