css如何实现元素不随滚动条滚动-css教程-PHP中文网

css如何实现元素不随滚动条滚动

醉折花枝作酒筹

发布： 2021-04-21 18:15:43

原创

6024人浏览过

css中可以使用position属性设置元素不随滚动条滚动，语法“position:fixed”。position属性规定元素的定位类型，当值为fixed时，元素以相对浏览器窗口进行定位，无论怎样移动滑动条，都会固定在浏览器窗口的同一位置。

css如何实现元素不随滚动条滚动

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在CSS中，可以使用固定定位（position:fixed;）来固定元素的位置，让元素不随滚动条滚动。

fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

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

立即学习“前端免费学习笔记（深入）”；

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            .logo {
                width: 540px;
                height: 258px;
                position: fixed;
                background: url(猫/images/1.jpg) no-repeat;
                margin: auto;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }
        </style>
    </head>

    <body>
        <div class="logo"> </div>
        布偶猫<br/> 布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫
        <br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>布偶猫<br/>
    </body>

</html>

登录后复制

效果图：

触发式加载精美特效企业网站源码1.0.0

触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也