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

时间:2016-11-06 11:56:56

标签: html css layout

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

<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时,我回到原来的问题,它按预期保留在角落里,但仍然跟着我的滚动。

3 个答案:

答案 0 :(得分:0)

你想要这样的东西: -

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

&#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;
&#13;
&#13;

答案 1 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;    

答案 2 :(得分:0)

您需要使用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像素,因此它不适合屏幕