div浮层,滚动条移动,位置保持不变的4种方法汇总

这里是"div浮层,滚动条移动,位置保持不变的4种方法汇总"的完整攻略：

1. 使用css position属性

当我们在使用 div浮层、滚动条移动等效果时，我们通常会使用css position属性。position属性有多个值，但是常见的是"fixed"和"absolute"。
- "fixed" ： 固定在页面的某个位置，即使滚动条移动也不会改变位置，适合用来做一些固定在浏览器窗口的按钮或导航栏。
- "absolute" ： 相对于父级元素固定位置。所以我们只需要在div浮层、滚动条移动的父级容器中加上position:relative，在子元素中设置position:absolute即可实现效果。
具体实现如下：

<style type="text/css">
.box{position:relative;width:200px;height:100px;background:#f4f4f4;overflow:auto;}
.inner{position:absolute;width:180px;height:80px;border:1px solid #ccc;padding:10px;background:#fff;}
</style>

<div class="box">
  <div class="inner">滚动条移动视野内元素</div>
</div>

2. 使用css transform属性

css transform属性是css3的新特性，主要用于元素的缩放、旋转、翻转等效果。而对于 div浮层的实现，我们通常使用transform:translate来实现位置的移动。如下：

<style type="text/css">
.box{width:200px;height:100px;position:relative;background:#f4f4f4;overflow:auto;}
.inner{width:180px;height:80px;border:1px solid #ccc;padding:10px;background:#fff;transform:translate(0,30px);}
</style>

<div class="box">
  <div class="inner">可以滚动的视野内元素</div>
</div>

3. 使用js动态修改样式

有时候我们想要在用户的操作下动态调整元素（div浮层、滚动条滑动）的位置，这时候我们就需要使用js来实现。通过js获取元素，可以使用element.style或是element.setAttribute('style',...)的方式动态修改样式。
具体实现如下：

<style type="text/css">
.box{width:200px;height:100px;display:none;background:#f4f4f4;overflow:auto;}
.inner{width:180px;height:80px;border:1px solid #ccc;padding:10px;background:#fff;}
</style>

<div class="box">
  <div class="inner">动态调整视野内元素的位置</div>
</div>

<script type="text/javascript">
  var box = document.getElementsByClassName('box')[0];
  var inner = document.getElementsByClassName('inner')[0];
  box.style.position = 'fixed';
  inner.style.top= '30px';
  box.style.display = 'block';
</script>

4. 使用css sticky属性

css sticky属性是css3的新特性，主要用于在某一范围内滚动时，元素固定在某个位置，超出范围后跟随滚动。这个属性兼容性不太好，需要添加 vendor prefix，代码如下：

<style type="text/css">
.box{
    width:200px;
    height:100px;
    padding:10px;
    margin:20px;
    background:#f4f4f4;
    overflow:auto;
    position:relative;
  }
.inner{
    position:sticky;
    top:10px;
    border: 1px solid #ccc;
    background:#fff;
    padding:10px;
  }
</style>

<div class="box">
  <div class="inner">位置固定，滚动条滑动跟随移动</div>
</div>

以上是关于"div浮层,滚动条移动,位置保持不变的4种方法汇总"的完整攻略，希望能够帮到你。