绝对定位和可滚动的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会移动。我希望它始终漂浮在#wrapper的边界处。

目前的情况如下所示： 这是jsfiddle链接：http://jsfiddle.net/b5fYH/ 谢谢。

编辑：

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

- Cybrix

---

我知道我可以把div.right放在#scroll里面，但是有没有避免这种情况的方法？ - Cybrix

Answer 1

您需要了解 position: absolute 和 position: fixed 的区别。

第一个意味着：将元素置于相对元素的绝对位置，并保持在那个位置（相对地）。

第二个意味着：将元素置于 窗口（框架）内的绝对位置，并无论发生什么都将其保持在那里。

请查看此示例：http://jsfiddle.net/b5fYH/1/

- MarcinJuraszek

---

谢谢，是的，我避免使用固定定位，因为我的 DIV 不应超出 #wrapper 边界。在实际模板中，#wrapper 是一个 col span_X 容器，使用 Twitter Bootstrap 调整大小，并且它不是全屏宽度。 - Cybrix

如果“固定”元素不需要相对于视口而是相对于“包装器”，您该怎么办？ - carinlynchin

如果不能使用fixed，你该如何实现它？ - carinlynchin

如果我使用静态，它就会固定不变...但我不明白为什么它必须是静态的...为什么它不能粘在它的相对父元素上呢？ - carinlynchin

Answer 2

问题在于overflow-x如何改变包装器div的宽度。

我找到的解决方案是：

演示：http://jsfiddle.net/5jWpG/

1. wrapping the whole thing with a new div with the id wrapper-container

2. then adding the following CSS code:

   #wrapper-container {
       position: relative;
   }
   
   #wrapper {
       position: static; /* or remove position relative from your code */
   }
   
   div.left, div.right {
       bottom: 16px; 
       height: auto; /* or remove height: 100% from your code */
   }
   

- Mario Vlad

---

谢谢您的回答。在我的浏览器上它确实有效，但在我的安卓手机上却不行。我会编辑我的原始问题，因为我认为“-webkit-overflow-scrolling: touch;”已经足够明显了。 - Cybrix