文章/答案/技术大牛

发布

css中图片不随滚动条滚动

基础概念

CSS中的position: fixed;属性可以让元素相对于浏览器窗口固定位置，不随滚动条滚动。

优势

固定位置：元素始终保持在屏幕的固定位置，无论用户如何滚动页面。
用户体验：常用于导航栏、侧边栏、广告等，提供持续的视觉焦点。

类型

固定定位：position: fixed;
绝对定位：position: absolute;（相对于最近的非static定位的祖先元素）
相对定位：position: relative;（相对于其正常位置）

应用场景

导航栏：固定在页面顶部，方便用户随时访问。
侧边栏：固定在页面一侧，提供额外的信息或工具。
广告：固定在页面的某个位置，确保用户能看到广告内容。

问题及解决方法

问题：图片不随滚动条滚动

原因：可能是没有正确设置CSS的position属性。

解决方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Image Example</title>
    <style>
        .fixed-image {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div style="height: 2000px;">
        <!-- 页面内容 -->
    </div>
    <img src="your-image-url.jpg" alt="Fixed Image" class="fixed-image">
</body>
</html>

解释：

position: fixed;：使图片相对于浏览器窗口固定位置。
top: 20px; 和 right: 20px;：设置图片距离顶部和右侧的距离。

参考链接

MDN Web Docs: position

通过以上设置，图片将始终保持在页面的固定位置，不会随滚动条滚动。

页面内容是否对你有帮助？

有帮助

没帮助

在wpf中，自动完成框中的滚动条不能随上移下键移动

wpf、autocompletebox

在wpf中，自动完成框滚动条不随Up / Down键移动。当我用Up / Down键选择一个项目时，滚动条不会随所选项目一起移动。

浏览 1提问于2011-11-10得票数 3

1回答

el-table 固定行？

el、table

el-table 想固定列表前2行，不随滚动条滚动

浏览 840提问于2020-01-10

1回答

在没有flash的情况下更改滚动条的图像

css、slider、browser-scrollbars

如何在带有溢出的框中更改滚动条的外观(而不是颜色)？我知道如何在闪光，我需要一种方法来做它没有它。事实上，我想知道他们是如何在苹果网站上做这个滑块的：看起来他们使用了css和javascript，但我只知道这些。有没有可能他们使用了DOM、DHTML、HTML5、Ruby或PHP？我没有头绪。

浏览 2提问于2010-05-28得票数 2

回答已采纳

1回答

使用CSS在第三方API中设置滚动条

scroll、overflow

在这些图像中，绿色的图像不是完全的displayed.Because，我正在使用第三方API进行这些设计。该第三方API中不包含滚动条。因此，我使用css3创建滚动条。创建自定义滚动条后，完整页面上不支持第三方API。所以这就是我的问题。我能用CSS解决这个问题吗？

浏览 0提问于2016-01-06得票数 1

回答已采纳

1回答

向下滚动时UISearchBar不随Tableview移动

ios、objective-c、xcode、uisearchbar

向下滚动时，UISearchBar不随Tableview一起移动。我不想单独放置滚动条。这是必须的。下面是代码。

浏览 0提问于2013-02-05得票数 1

回答已采纳

2回答

JQuery body背景动画- Chrome/Safari中的错误

jquery、css、google-chrome、safari

在Chorme和Safari中，我得到了一些没有正确改变颜色的背景部分。IE和FF工作得很好。.stop(true).animate({ backgroundColor: colors[currColor] }, animationDuration);你可以通过转到并滚动到底部，等待cca 10秒，然后向上滚动一半来重现错误。

浏览 0提问于2011-09-15得票数 2

回答已采纳

1回答

CSS粘性页脚使滚动条在IE 8中无法滚动

css、internet-explorer、internet-explorer-8、sticky-footer

在IE8中，滚动条出现了，但不起作用，我没有任何其他方法来向下移动。我使用的是web上出现的条件语句： <style type="text/css"> </style> <!

浏览 1提问于2011-01-17得票数 1

回答已采纳

2回答

Jquery，使用上一个/下一个链接在幻灯片图像上添加效果

javascript、jquery、html、css、slide

changeBackground() bgCounter = (bgCounter+1) % backgrounds.length; $('#Main-screen').css('background-size','coverbgCounte

浏览 0提问于2014-09-29得票数 0

3回答

wxpython:不带垂直滚动条的wxgrid

wxpython

可以移除wxgrid中的自动水平滚动条吗？

浏览 1提问于2011-01-31得票数 4

3回答

Android背景显示不正确，Joomla

css、joomla、background、render

我已经用Joomla创建了一个网页，并指出Android中的背景渲染不正确。我怎么才能修复它？附注:我对移动设备的网页没有太多的经验。抱歉的。

浏览 0提问于2012-12-15得票数 0

回答已采纳

2回答

CSS溢出并使用浏览器的本机滚动条

html、css

我有一个包含css的DIV部分position:inherit;height:100%; } 好的，在图片中，你可以看到我有两个滚动条，我想移除内部的滚动条，让它由浏览器的本机滚动条控制

浏览 2提问于2011-07-21得票数 0

回答已采纳

2回答

滚动条在html/css中不起作用。文本从页面中消失

html、css、scroll

这是我的HTML的一个子页面，我不知道为什么我不能滚动。有没有人能解释一下为什么它不工作？我试过从其他有类似问题的人那里读到的一些东西，但他们也不能解决它。/css/factions.css"> </head> <Img>

浏览 29提问于2021-04-17得票数 0

1回答

CSS溢出滚动条阻塞图像底部

css、image

我试图隐藏图像的垂直滚动条，同时在必要时提供水平滚动条。我使用的CSS是这很好，但我遇到了一个问题，图像的底部被水平滚动条挡住了。有没有办法在图片“下面”添加条？

浏览 6提问于2012-07-09得票数 0

2回答

Safari 5.1.3中未显示滚动条(7534.53.10)

safari、scrollbar

我有一个带有滚动条的页面设置，这个滚动条是用css overflow函数设置的，但滚动条在Safari 5.1.3中不会显示。它在IE/FF的不同版本中显示，甚至在更早的Safari版本(5.0.5)中显示。我甚至尝试过设置css的内联样式，但无法显示出来。 html (这不是完整的html，div中有更多的图片，我只是不想在文章中放太多的html。img src="images/rings/t

浏览 2提问于2012-02-18得票数 0

回答已采纳

1回答

带有未知高度居中图片的水平滚动条

html、css

我想在html/css (没有js)中制作一个从数据库中带水平滚动条的图片块，这样无论它们的高度如何，它们都会居中。我找到的将未知高度的图片居中的唯一解决方案是使用display: table或display: flex。但我发现制作水平滚动条的唯一解决方案是使用display: block。我的意思是图片应该居中，不同的高度：

浏览 6提问于2013-12-24得票数 0

2回答

单击按钮时水平滚动

javascript、jquery、html、scroll

我想通过左右单击按钮来水平滚动div，但它不起作用$('#myDiv').scrollLeft(300) $('#right').live('click' , function(){如何通过单击一个字节来滚动div。我还想删除滚动条

浏览 4提问于2012-06-25得票数 1

回答已采纳

1回答

启用永久垂直和水平滚动条

14.04、scrolling

我面临一个问题，它是在Ubuntu (14.04)永久滚动条是不存在的，但当你移动鼠标指针到最右边或最底部的时候，它就会出现。因此，我想问一下，如何使永久滚动条在右边和底部的最一边。我相信在我面前一定有很多人面临过这个问题。谢谢。永久的意思是滚动条应该一直都是可见的。

浏览 0提问于2014-08-20得票数 7

回答已采纳

1回答

如何阻止我的滚动条推动我的标题？

html、css

我有这个问题，我的滚动条覆盖了我的标题，有没有一些CSS属性可以用来移动标题的滚动条“在顶部”？我有一个透明的背景，我认为这将完成这项工作。基本上，我如何让我的滚动条悬停在标题上方，而不是将它推到左边？ ? 正如你在图片中看到的，滚动条占据了标题的整个宽度。这是我的滚动条CSS： '@global': { 'scrollbar-width': 'th

浏览 15提问于2021-02-09得票数 1

回答已采纳

2回答

我想要更改水平滚动条css

html、css、scrollbar

我想要更改水平滚动条css。这里我使用代码来改变它，但它也改变了我的垂直滚动条，我只想改变水平滚动条。该怎么做呢？在这里我也上传图片。

浏览 1提问于2019-03-05得票数 5

3回答

在使用左边距(在宽度为100%的元素上)显示固定菜单时避免水平滚动条

javascript、jquery、html、css、css-position

在我的页面中，左侧有一个150px宽的固定菜单td (不随页面滚动)。页面容器的宽度为100%。当您在元素上使用position:fixed时，它会将元素从布局中移除，因此您必须绕过它以确保所有内容都可见。因此，我在页面容器上设置了margin-left:150px。这导致它在屏幕右侧溢出150px，显示一个水平滚动条。

浏览 1提问于2012-09-17得票数 0

回答已采纳

点击加载更多