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

我尝试使用绝对值，但是当使用右：0px时，无论我缩小多少都无法找到图像 - 它会消失。相反，我尝试从左侧移动它（例如：左：900px），但每当我缩小时，这显然不会向右移动。当使用float：right;我的形象也消失了。无论如何，这些可能无关紧要，但值得一提。

最终，我希望图像是交互式的，因为当我缩小（/ in）时它继续向右移动保持在右上角，但是当向下滚动时我不希望它跟随

非常感谢提前。

更新：我添加了更多的HTML和CSS，并尝试了绝对方法，仅让图片保持消失。当我回到position:fixed;right:0px;top:10px;寻找图像的嵌入式CSS时，我回到原来的问题，它按预期保留在角落里，但仍然跟着我的滚动。

Answer 1

你想要这样的东西： -

＆＃13;

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

＆＃13;

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

＆＃13;

或

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果我使用绝对位置我没有发现任何变化。我设置了一个额外的div类测试。高度..不，你可以测试它。放大和缩小。您将在同一个地方找到abc div

＆＃13;

.abc{
  position: absolute;
  right: 10px;
  top: 10px;
  background: red;
}
.test {
  height: 200vh;
  background: blue;
}

＆＃13;

<div class="abc">
 <img class="box" src="a src" alt="an alt" title="a title">
</div>
   <div class="test">
   </div>

＆＃13;

Answer 3

您需要使用position：absolute

尝试使用绝对运行前所做的操作，但指定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 width：100％，然后图像就会显示出来。目前图片位于#longbox的右侧，但该图片的长度为50000像素，因此它不适合屏幕

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

3 个答案: