I have an iframe image which I am referencing from the web. I have also created two div black boxes to cover a portion of the div on the top, and bottom. However, on the resize, it offsets slightly and doesn't line up as expected. How could I go along of making sure the black boxes covering it stay in the exact same spot on the iframe during window resize I would not like to justify anything by exact pixels.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Scroll.css">
</head>
<body bgcolor="#000000">
<div class="box1 black"></div>
<div class="box2 black"></div>
<iframe width="100%" height="300" src="https://jsfiddle.net/Amasian21/2me9mwaL/embedded/result/dark/?menuColor=000000&bodyColor=000000" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
CSS
body {
margin: 10px;
font-family:'Lato', sans-serif;
}
.box1{
width:100%;
height:60px;
position: fixed;
left: 0;
top: 0;
z-index: 3;
}
.box2{
width:100%;
height:32%;
position: fixed;
left: 0;
top: 0;
z-index: 3;
}
.black{
background:#ff0000;
}
iframe{
position: fixed;
top: 25%;
}
