How to prevent fixed image from scrolling down?
<p>I have an image in the top right corner of my page. It is a fixed element, so whenever I zoom in or out it stays in the top right corner of the browser as intended. The thing that happens which I don't intend, is that when scrolling down the page, the image follows. I want it to constantly be in the page's top right corner when zooming in/out, but to stay static when I scroll down so it remains on the top of the page with all other content which is positioned there. Here is the code for the element:

    
    </p>

<pre><code>&lt;div id="abox" class="Mbox"&gt;&lt;a href="#" style="font-family:arial;font-size:120%;text-decoration:none;" title="title"&gt;Some text&lt;/a&gt;&lt;/div&gt;

&lt;div id="abox" class="Cbox"&gt;&lt;a href="#" style="font-family:arial;fontsize:120%;
text-decoration:none;" title="title"&gt;Text&lt;/a&gt;
&lt;/div&gt;

&lt;div style="position:absolute;&gt;
&lt;img class="imagebox" src="image.png" alt="alt" title="title"&gt;
&lt;div id="textbox" style="margin-right:450px;"&gt;Some text here.&lt;/div&gt;
</code></pre>

<p></p>

<p>And the relevant CSS:</p>

<pre><code>#abox {
position:relative;
}


.Mbox {
left:20px;
bottom:335px;
}


.Cbox {
left:45px;
bottom:505px;
}


#longbox {
width:50000px;
height:50px;
position:relative;
bottom:8px;
right:8px;
}



.imagebox {
width:45px;
height:27px;
padding:0px;
border:0px;
margin:0px;
}
</code></pre>

<p>I tried using absolute, but when using right:0px, no matter how much I zoom out I can't find the image - it disappears. Instead I tried shifting it from the left (e.g: left:900px), but that obviously didn't keep in moving to the right whenever I zoomed out. When using float:right; my image also disappears. These may be irrelevant anyway, but worth mentioning.</p>

<p>Ultimately, I want the image to be interactive in the sense it continues to shift to the right to stay in the top-right corner as I zoom out(/in), but when scrolling down I do not want it to follow.</p>

<p>Many thanks in advance.</p>

<p><strong>UPDATE:</strong> I have added more of the HTML and CSS, and tried the absolute method only for the image to remain disappeared. When I go back to <code>position:fixed;right:0px;top:10px;</code> for the embedded CSS of the image, I go back to the original issue with it staying in the corner as intended but still following my scroll.</p>