How to prevent fixed image from scrolling down?


Tags: html,css,layout

Problem :

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:

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

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

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

And the relevant CSS:

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

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.

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.

Many thanks in advance.

UPDATE: 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 position:fixed;right:0px;top:10px; 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.



Solution :

If i used position absolute I dont find any changes. And I set a extra div class test. with a height.. No you can test it. zooming in and out. the abc div you will find in same place

.abc{
  position: absolute;
  right: 10px;
  top: 10px;
  background: red;
}
.test {
  height: 200vh;
  background: blue;
}
<div class="abc">
 <img class="box" src="a src" alt="an alt" title="a title">
</div>
   <div class="test">
   </div>


    CSS Howto..

    How can I keep the elements inside a div independent from it's CSS3 animations?

    css how to make full height div with scroll support?

    How do I place a small paragraph to the right in between a text article

    How to make specific areas in a div clickable with css / js / anything

    How to increase height of footer's div when browser window is resized?

    How to change the colors of a website in real time?

    How to make all the rows of a table the same height as the biggest one

    Javascript how to use external Css sheet

    How to keep text in the middle of the screen even when re-sizing page in html/css

    How to stop web content from being displayed before css/jquery is prepared?

    How to target a specific element of a div in CSS?

    how to add css background color for div tag

    Toggle radio button on javascript hide/show of div

    How to add multiple CSS styles to an element with .css()

    CSS: How to shrink first div in container instead of going outside of container

    How to override css class without touching the HTML?

    How do I implement a MailChimp API form embed?

    Slide Up on Services Pages & Slider Not Working/Showing

    Footer Showing White Bar on only one page of website

    How to use a different stylesheet for iphone or android?

    How the licensed web font is getting rendered?

    How do I get an html/css form to post to Gravity Forms?

    How to give option to add css classes/IDs to content to in CMS's WYSIWYG content builder/editor to non-technical client?

    How come half the triangle is missing

    How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

    CSS - How to crop an image to a square, if it's already square then resize it

    How do you position CSS elements directly under each other?

    how to use input[type=range] CSS Pseudo-elements with firefox and IE

    How to calculate percentages in LESS CSS?

    How to replace inline text with images using CSS