请教如何通过CSS实现div的固定位置，不随页面滚动消失

Posted 2023-05-11

通过position属性来控制；position属性的值常规有四个：

static：默认值，没有定位，元素出现在正常的流中；

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位；

relative：  生成相对定位的元素，相对于其正常位置进行定位。

跟随浮动样式采用fixed以浏览器窗口进行绝对定位，通过top（距窗口上方的距离）、bottom（距窗口下方的距离）、left（距窗口左方的距离）、right（距窗口右方的距离）来控制其位置。

例如：

header

width: 100%;

height: 100px;

    position: fixed;

    top: 0;

z-index: 500;

参考技术A

给这个div加上样式：

#div 
    position: fixed;
     left: 100px;
     bottom: 100px;

参考技术B position：fixed；

CSS DIV绝对定位 后 页面的大小改变 div层位置如何保持不变

CSS DIV绝对定位 后 页面的大小改变 div层位置如何保持不变

div层的绝对定位不一定非要用 精确的数值定位，还可以使用关键字， 以及百分比，你可以试试看

参考资料：http://www.ttwinbug.com/thread-8802-1-1.html

参考技术A window.resize=function()
长=当前总厂*固定比例
宽=当前总宽*固定比例


所以咱一下用相对
偶尔绝对一下 参考技术B 利用div嵌套 本分比形式即可解决 参考技术C 给你举个例子：
<div style="position:absolute; width:100px; height:50px; background:#c00; left:50%; margin-left:-50px; top:30px;"></div>