html不随页面滚动条滚动,css如何让元素不随滚动条滚动？

偏执的太偏执、 2022-10-06 00:58 568阅读 0赞

我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置，无论如何滚动滚动条，位置不变。那么如何让元素不随滚动条滚动？下面给大家介绍一下方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

![58637e04afd3a99e47846214c5b9f6eb.png][]

在CSS中，可以使用固定定位(position:fixed;)来固定元素的位置，让元素不随滚动条滚动。fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

固定定位的元素以相对浏览器窗口为基准进行定位的，无论怎样移动你的滑动条，它都会固定在相对于浏览器窗口的固定位置，另外要注意，它的兄弟元素将会在位置排布上忽视它的存在。这个时候用的top，bottom，left，right也是相对于浏览器窗口而言的。

示例：

.logo \{

width: 540px;

height: 258px;

position: fixed;

background: url(https://www.baidu.com/img/bdlogo.png) no-repeat;

margin: auto;

left: 0;

right: 0;

top: 0;

bottom: 0;

\}

111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111  
111  
111

111  
111  
111  
111  
111  
111

效果图：

![686c66a466a75e9906502bd589750fc0.gif][]

从上面的示例看出：可以使用position: fixed来固定图片位置不变，让图片位置可以不随着文字的拖动而改变图片位置。

注：

在IE7以上版本及firefox、opera、safari里，都支持css属性"position:fixed"，它的作用就是将元素相对于窗口固定位置。

但是在IE6下，并不支持position:fixed属性，这个时候我们需要对IE6进行hack处理。

更多CSS相关知识，可访问 CSS教程 ！！

[58637e04afd3a99e47846214c5b9f6eb.png]: /images/20221005/b41186102ed44222ad44e8e6dac2cdd4.png
[686c66a466a75e9906502bd589750fc0.gif]: /images/20221005/2c0c30f50faa4668912af7b74c416d99.png

发表评论取消回复

表情：

评论列表（有 0 条评论，568人围观）

还没有评论，来说两句吧...

相关阅读

相关不显示滚动条，仍可滚动

css 代码，\divId 为选择器 divId::-webkit-scrollbar { display: none; } ---

r囧r小猫/ 2023年02月26日 14:29/ 0 赞/ 28 阅读

相关 css控制背景图片不随滚动条滚动

背景属性 background-attachment: fied 可以让背景图片固定：（小技巧：让元素占满整个屏，如下） <template>

亦凉/ 2023年02月11日 04:39/ 0 赞/ 12 阅读

相关 php底部固定滚动,CSS控制DIV永远固定在页面底部不随滚动而滚动

复制代码代码如下: html,body \{ width:100%; height:100%; margin:0px; padding:0px; overflow:

忘是亡心i/ 2023年01月17日 02:24/ 0 赞/ 244 阅读

相关 html不随页面滚动条滚动,css如何让元素不随滚动条滚动？

我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置，无论如何滚动滚动条，位置不变。那么如何让元素不随滚动条滚动？下面给大家介绍一下方法。有一定的参考价值，有需要的朋友可

偏执的太偏执、/ 2022年10月06日 00:58/ 0 赞/ 569 阅读

相关 css 隐藏滚动条竖向y滚动，横向x不滚动

.bottom { overflow-x: hidden; overflow-y: scroll; } 参考博客：

左手的ㄟ右手/ 2022年09月09日 14:51/ 0 赞/ 269 阅读

相关 css 表头不滚动,css固定表头不随滚动条移动.doc

先说效果描述如图：涉及到数据保密的缘故所以数据弄掉了。效果为：整个grid数据会出现横向，竖向滚动条。其中所有的表头：操作，序号，测试1.。。。等等要素，不会随着竖向滚动条的滚

深藏阁楼爱情的钟/ 2022年09月02日 15:40/ 0 赞/ 272 阅读

相关 HTML滚动条

滚动条第一种方式： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=

浅浅的花香味﹌/ 2022年07月11日 01:50/ 0 赞/ 296 阅读

相关隐藏滚动条css3实现滚动同时隐藏滚动条

1. 1. 主要代码：　　ul ::-webkit-scrollbar\{

Bertha 。/ 2021年10月23日 07:13/ 0 赞/ 514 阅读

相关 CSS 实现隐藏滚动条滚动

需求：当页面元素溢出的时候会产生滚动条，这个时候需要页面样式优化：CSS实现隐藏滚动条但是可以滚动。 css伪类元素控制 body::-webkit-s

╰半夏微凉°/ 2021年09月19日 01:36/ 0 赞/ 533 阅读

相关隐藏滚动条css3实现滚动同时隐藏滚动条

项目场景需求要在局部实现滚动，但是滚动出现了滚动条，一瞬间感觉整个页面都不好了，经过努力css成功实现滚动同时隐藏滚动条，废话不多说，直接上代码核心代码： :

╰+哭是因爲堅強的太久メ/ 2021年07月04日 21:32/ 0 赞/ 708 阅读