html怎样设置div固定位置不变-猿码集

HTML怎样设置`<div>`固定位置不变？

<div>是HTML中常用的一个标签，它是用来表示页面布局中用作一个容器的块元素，可用来包含其他HTML元素。在许多情况下，我们希望设置<div>的位置不随页面滚动而移动，即使用户向上或向下滚动页面，这个<div>仍可保持在其原始位置。接下来，我们将看到如何通过CSS来实现这个效果。

1. 使用position属性

使用position属性及其相关值，如：absolute、fixed、relative、static，可以控制元素相对于其父元素的位置。以fixed为例，当元素的position属性设置为fixed时，元素会相对于浏览器窗口的视口进行定位，而不是相对于其父元素。


<div class="fixed">这个div不会随着页面滚动而移动</div>
<style>
    .fixed {
        position: fixed;
        top: 0;/*元素相对于视口顶部的距离*/
        left: 0;/*元素相对于视口左边缘的距离*/
    }
</style>

注意：使用fixed定位的元素脱离文档流，会对其他元素的布局产生影响。

2. 使用z-index属性

z-index属性用于指定元素在垂直堆栈中的位置，具有更高z-index值的元素将覆盖具有更低z-index值的元素。可以使用z-index属性控制元素的堆叠顺序，以实现固定位置的效果。


<div class="fixed">这个div不会随着页面滚动而移动</div>
<div class="content">这是页面的内容，高度随意设置</div>
<style>
    .fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;/*元素堆叠顺序，可以设置任意正整数*/
    }
    .content {
        height: 1000px;
        margin-top: 100px;
    }
</style>

3. 使用JavaScript

除了CSS，我们还可以使用JavaScript来实现固定位置的效果，具体步骤如下：

1) 获取元素的绝对位置；

2) 监听页面的滚动事件；

3) 当页面滚动到元素固定位置时，将元素的position属性改为fixed。


<div class="fixed">这个div不会随着页面滚动而移动</div>
<div class="content">这是页面的内容，高度随意设置</div>
<script>
    var ele = document.querySelector('.fixed');
    var offsetTop = ele.getBoundingClientRect().top;/*获取元素的绝对位置*/
    window.addEventListener('scroll',function(){
        if(window.scrollY >= offsetTop) {
            ele.style.position = 'fixed';/*滚动到元素固定位置，将元素的position属性改为fixed*/
        } else {
            ele.style.position = 'static';/*未滚动到元素固定位置，将元素的position属性改为static*/
        }
    });
</script>

总结

CSS的position属性及其相关值、z-index属性以及JavaScript都可以实现<div>固定位置不变的效果，可以根据需要选择合适的方法实现。无论哪种方法，都应在保证用户体验的前提下进行页面布局和设计。

参考资料：

MDN Web文档，https://developer.mozilla.org/zh-CN/

W3Schools，https://www.w3schools.com/

html怎样设置div固定位置不变