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 is at the rate import filename.css in style tag different from link tag to relate to css file

    How can I get mobile safari to use the right CSS?

    CakePHP: How to use PHP to dynamically use a CSS property type in an MVC framework

    How to do the Height of html tag Body on 100% of browser window size?

    How can I set a google-font as default-font in CKEditor?

    How can you assign a class to an id in css or javascript?

    Bootstrap - How to ensure white space on far left and far right on mobile

    How to disable external css stylesheet - Newbie

    How to make div block fixed as window size changes?

    How to use Javascript in a innerHTML inline css scenario?

    How to copy the CSS to another tab in Chrome?

    how to link stylesheet in css

    how to bring ul element to the center of the div? CSS

    divs hide and show

    How to remove space between two buttons in a table row or “column”?

    How to do onclick in CSS to do transition on image?

    How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?

    how to change single li element in a menu using lists?

    How to expand text to full DIV width

    How do I fit text into footer margins

    How to get table to overflow within a flex div?

    How to make my text appearing while scrolling website

    How do I suppress errors in IntelliJ Idea 12

    jquery css how to retain position if you remove margin

    How to align a div with the right of a table?

    How can align these elements?CSS

    bootstrap dropdown on mouse over the menu item should show edit/delete icon on right side

    CSS triangle how to remove white space on the right

    css + thymeleaf - How to auto-adjust displayed screen size?

    How can I center a CSS background image as if the image had a different width (without cutting the bgimg off)?