Iframe: Cut off the top

Question

I read below article about hiding the some of bottom part in iframe by using iframe wrapper and overlay. Iframe: Cut off the bottom

I want to do same but from top instead of bottom. what i need to change in this below css

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

score 0 · Accepted Answer · answered Oct 06 '21 at 12:03

You can achieve this by placing the overlay absolut in the iFrame wrapper. Then you can position it by using the ´top´ or ´bottom´ property.

I included two examples. One for the top and one for the bottom.

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

Iframe: Cut off the top

1 Answers1