Make a non-nested div not jump at window resize - html

Question

I have a div box that in the HTML code is below all the other content and not nested into anything else. In the CSS I placed the div on the top right of the site, and when I change the window size so that it doesn't fit, it jumps down on the site. I am not allowed to change the HTML code (it's a school assignment).
Is there any way I can make this jumping div box stay in place relative to the main content?
In the div box I have placed a background picture because this is the only way to add a stand-alone picture without changing the HTML. The teachers added these extra div-boxes in the code just for this.
The div's CSS (if it helps):
#extraDiv1 {
background-image: url('images/koala.png');
background-repeat: no-repeat;
background-size: 250px;
width: 250px;
height: 370px;
float: left;
margin-left: 20px;
margin-top: -610px;
position: relative;
z-index: -1;
}

Answer 1

You can use the top and left attributes to position your box properly. Since you're using relative positioning, this will position it relative to its normal position. Therefore, if you want to line it up with where you said you want it, you would end up with something like this:
#extraDiv1 {
background-image: url('images/koala.png');
background-repeat: no-repeat;
background-size: 250px;
width: 250px;
height: 370px;
position: relative;
z-index: -1;
border: 3px solid red;
top: -610px;
left: 660px;
}
Hope this helps!