Can an element stick to an Iframe?

Issue

I tried to use transform and padding on my element, but it didn't work quite well when you resize your window. It sometimes even goes out of my window. I tried to transform one like 60% to the right and the other one 40%, but that didn't work too. So I want my element to be stuck together with an 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>

Solution

Nest your code in a wrapper and use position: sticky;. Also, you were using a lot of padding which seemed unnecessary so I removed it. See the CSS changes I made below.

#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>

Answered By - カメロン