css - 绝对定位和可滚动 DIV

Question

我有这个棘手的 CSS 问题:我有这个 HTML:

<div id="wrapper">
    <div class="left"></div>

    <div id="scroll">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus volutpat turpis at iaculis. Proin at nisl leo. Morbi nec blandit leo? Pellentesque interdum nunc sed nisl rhoncus gravida. Nunc sollicitudin, mi sit amet porta mollis, metus erat ornare odio, eu accumsan mauris diam nec augue. Ut tincidunt dui at lorem consequat vitae consectetur sapien pharetra. Suspendisse potenti. Donec turpis enim, varius accumsan congue vitae, rhoncus ut justo. Curabitur tristique lobortis eros ut pharetra. Maecenas non condimentum justo. Integer tincidunt; velit quis auctor varius, magna lorem pharetra urna, eget pellentesque leo nibh at mi. Ut pretium bibendum dui vel venenatis. Proin vel sem vitae lacus tincidunt bibendum. Pellentesque blandit mauris sit amet mauris sollicitudin pretium. In molestie condimentum nisi placerat consequat.
    </div>

    <div class="right"></div>
</div>

使用这个 CSS:

#wrapper {
    position: relative;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: 47px;
}

#scroll {
    position: relative;
    height: 100%;
    width: 10000px;
}

div.left, div.right {
    position: absolute;
    display: block;
    background-color: rgba(255, 0, 0, 0.5);
    width: 24px;
    height: 100%;
    z-index: 100;
    top: 0;
}

div.left {
    left: 0;
}

div.right {
    right: 0;
}

视觉效果是这样的:

由于某些原因，当我滚动 #scroll 时，div.right 正在移动。我希望它始终 float 在 #wrapper 的边界。

这是我现在得到的:

这是 jsfiddle:http://jsfiddle.net/b5fYH/

谢谢

编辑

正因为它不明显，它必须在移动设备上工作。

Answer 1

你必须知道 position: absolute 和 position: fixed 之间的区别。

第一个意思是:将元素放在相对元素中的绝对位置，并保持在该位置(相对)。

第二个:将元素放在 window(框架)内的绝对位置，无论发生什么情况，它都保持在那里。

检查这个 fiddle :http://jsfiddle.net/b5fYH/1/