overflow:auto与absolute滚动定位实例页面

展示

滚动条不出现

绝对定位元素不跟随滚动

如果仅仅是绝对定位元素，是不会出现滚动条的。但是，如果绝对定位元素和大量非绝对定位元素在一起，要知道，绝对定位元素会让.box元素出现滚动条的，此时，滚动此滚动条（移动端手指垂直方向滑动），会发现绝对定位的图片并没有跟着滚动。这个效果就是这里要展示的绝对定位元素不跟随滚动特性。

代码

• HTML：

  <h4 class="title">滚动条不出现</h4>
  <div class="box">
    <img src="1.jpg">
  </div>
  <h4 class="title">绝对定位元素不跟随滚动</h4>
  <div class="box">
    <img src="1.jpg">
    <p>如果仅仅是绝对定位...跟随滚动特性。</p>
  </div>

• CSS：

  .box {
      width: 300px; height: 100px;
      background-color: #f0f3f9;
      overflow: auto;
  }
  .box > img {
      width: 256px; height: 192px;
      position: absolute;
  }