如何防止向下滚动固定图像？

Question

我在页面的右上角有一张图片。它是一个固定的元素，所以无论何时放大或缩小，它都会按照预期保持在浏览器的右上角。发生的事情，我不打算，是当滚动页面时，图像如下。我希望它在放大/缩小时始终位于页面的右上角，但在向下滚动时保持静态，以便它保留在页面的顶部，其中包含所有其他内容。下面是该元素的代码：

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

和相关的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; 
} 

我试着用绝对的，但使用权当：0像素，不管多少我缩小了我找不到图像 - 它消失了。相反，我尝试将其从左边移开（例如：左：900px），但是当我缩小时，显然没有继续向右移动。当使用float时：right;我的形象也消失了。这些可能无关紧要，但值得一提。

最终，我希望图像具有互动性，因为在我缩小（/ in）时它会继续向右移动以保留在右上角，但当向下滚动时，我不希望它跟随。

非常感谢提前。

更新：我已经添加了更多的HTML和CSS，并试图绝对方法只为图像保持消失。当我回到position:fixed;right:0px;top:10px;为图像的嵌入式CSS，我回到原来的问题，它停留在角落的意图，但仍然遵循我的滚动。

Answer 1

如果我使用绝对位置我不觉得任何CH安格斯。我设置了额外的div类测试。与高度..不，你可以测试它。放大和缩小。农行DIV，你会在同一个地方找到

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

Answer 2

你想是这样的： -

body { 
 
     background-image: url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg'); 
 
     background-repeat: no-repeat; 
 
     background-attachment: fixed; 
 
     
 
    }

<p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>If you do not see any scrollbars, try to resize the browser window.</p>

或

body { 
 
     background-image: url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg'); 
 
     background-repeat: no-repeat; 
 
     background-attachment: fixed; 
 
     position:fixed; 
 
     top:10px; 
 
     right:0px; 
 
    }

<p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>The background-image is fixed. Try to scroll down the page.</p> 
 
    <p>If you do not see any scrollbars, try to resize the browser window.</p>

Answer 3

你需要使用的位置是：绝对

尝试做你绝对以前做什么，但指定的div

的宽度和高度

<div style="position:absolute;top:10px;right:0px;width:100px;height:100px"> 
    <img class="box" src="a src" alt="an alt" title="a title"> 
</div> 

希望这应该工作

编辑：展望新的代码，你应该使#longbox宽度：100％，然后图像就会显示出来。目前该图片位于#longbox的右侧，但长度为50000px，因此不适合放在屏幕上。