H3ll0 H3ll0 - 29 days ago 16
CSS Question

How to prevent fixed image from scrolling down?

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:

<body style="background-color:dodgerblue;overflow-x:hidden;">
<div id="longbox">
<a href="#"><img src="a src" style="position:relative;left:22px;top:3.5px;width:121.55px;
height:42.5px;" alt="some alt" title="title"></a>

<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;font-size:120%;
text-decoration:none;" title="title">Text</a>
</div>

<div style="position:absolute;top:10px;right:0px;width:100px;height:100px">
<img class="imagebox" src="image.png" alt="alt" title="title">
</div>

</div>

<div id="textbox" style="margin-right:450px;">Some text here.</div>




And the relevant CSS:

#abox {
position:relative;
}


.Mbox {
left:200px;
bottom:33.5px;
}


.Cbox {
left:455px;
bottom:55px;
}


#textbox {
position:relative;
background:rgba(255,255,255,1);
padding:10px;
font-family:arial;
margin:40px;
z-index:-1;
box-shadow:0 0 30px rgba(000,000,000,1);
border-radius:10px;
}


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


@media screen and (min-width:1008px) {

#textbox {
width:auto;
}
}


@media screen and (max-width:1006px) {

#textbox {
width:auto;
}
}


.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.

Answer

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>

Comments