iframe：切掉顶部

【问题标题】：Iframe: Cut off the topiframe：切掉顶部
【发布时间】：2021-10-06 11:57:58
【问题描述】：

我阅读了下面有关使用 iframe 包装器和覆盖隐藏 iframe 中的一些底部的文章。 Iframe: Cut off the bottom

我想做同样的事情，但从顶部而不是底部。我需要在下面的 css 中更改什么

#iframe-wrapper {
    position:relative;
}
#iframe-overlay { /* Adjust values as needed */
    height:17px;
    width:480px;
    background-color:#fff;
    position:relative;
    top:-24px;
    left:5px;
}

【问题讨论】：

标签： css iframe

【解决方案1】：

您可以通过将绝对叠加层放置在 iFrame 包装器中来实现此目的。然后，您可以使用“顶部”或“底部”属性对其进行定位。

我举了两个例子。一个用于顶部，一个用于底部。

#iframe-wrapper {
  position:relative;
  background: red;
  width: 300px;
  height: 300px;
}
#iframe-overlay-top {
  height:17px;
  width:100%;
  background-color: green;
  position:absolute;
  top: 0;
  left:0;
}
#iframe-overlay-bottom {
  height:17px;
  width:100%;
  background-color: blue;
  position:absolute;
  bottom: 0;
  left:0;
}

<div id="iframe-wrapper">
  <div id="iframe-overlay-top"></div>
  <div id="iframe-overlay-bottom"></div>
</div>

【讨论】：