元素可以粘在 iframe 上吗？答案

【问题标题】：Can an element stick to an Iframe?元素可以粘在 iframe 上吗？
【发布时间】：2022-01-24 01:52:11
【问题描述】：

我尝试在我的元素上使用变换和填充，但在调整窗口大小时效果不佳。它有时甚至会从我的窗外消失。我试图将一个 60% 向右转换，另一个 40% 转换，但这也没有用。所以我希望我的元素与 iframe 粘在一起。

#weertekst{
  font-weight:bold;
}

#test {
    background-color: #0032A1;
    height: 515.5px;
    width: 200px;
    border-top-left-radius:20px ;
    border-bottom-left-radius:20px ;
    margin: 0px;
    padding: 0px;
    justify-content: center;
    align-items: center;
  
    /* Positioning */
    position: static;
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
    float: none;
    display: flex;
    clear: none;
    z-index: auto;
}

  #intest{
    width: 180px;
    height: 453px;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

<div id="pad">
    <div id="test">
      <div id="intest">
        <div id="dag-datum">
          <div id="dag"><h3>Vandaag</h3></div>
          <div class="datum"><span id="datum">...</span></div>
        </div>
        <div id="weer-logo"><img id="plaatje"></div>
        <div id="weer-tekst"><span id="weertekst">...</span></div>
        <div id="graden"><h3><!---Temp:---> <span id="temperatuur">...</span> ºC</h3></div>
        <div id="directie"><h3 id="nbold">Windrichting:<br></h3> <h3><span id="winddir"></span></h3></div>
        <div id="snelheid"><h3 id="nbold">Windsnelheid:<br></h3> <h3><span id="windspeed"></span></h3></div>
      </div>
    </div>
  </div>

  <div id="kaart">
    <iframe id="radarbeeld" width=503.5 height=515.5>
    </iframe>
  </div>

【问题讨论】：

标签： html css

【解决方案1】：

将您的代码嵌套在wrapper 中并使用position: sticky;。此外，您使用了很多似乎不必要的填充，所以我将其删除。请参阅我在下面所做的 CSS 更改。

#pad {
  float: left; 
}

#kaart {
  display: block;
transform: translateX(-30px);
  text-align: center;
}

#weertekst{
  font-weight:bold;
}

#test {
    background-color: #0032A1;
    height: 520px;
    width: 200px;
    border-top-left-radius:20px ;
    border-bottom-left-radius:20px ;
    margin: 0px;
    padding: 0px;
    margin-right: 1.8rem;
  
    /* Positioning */
    position: sticky;
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
    float: none;
    display: flex;
    clear: none;
    z-index: auto;
}

  #intest{
    width: 180px;
    height: 453px;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
  

  
  .wrapper {
    display: flex;
    justify-content: center;
  }

<div class="wrapper">
<div id="pad">
    <div id="test">
      <div id="intest">
        <div id="dag-datum">
          <div id="dag"><h3>Vandaag</h3></div>
          <div class="datum"><span id="datum">...</span></div>
        </div>
        <div id="weer-logo"><img id="plaatje"></div>
        <div id="weer-tekst"><span id="weertekst">...</span></div>
        <div id="graden"><h3><!---Temp:---> <span id="temperatuur">...</span> ºC</h3></div>
        <div id="directie"><h3 id="nbold">Windrichting:<br></h3> <h3><span id="winddir"></span></h3></div>
        <div id="snelheid"><h3 id="nbold">Windsnelheid:<br></h3> <h3><span id="windspeed"></span></h3></div>
      </div>
    </div>
  </div>

  <div id="kaart">
    <iframe id="radarbeeld" width=503.5 height=515.5>
    </iframe>
  </div>
</div>

【讨论】：