如何对UI小部件使用绝对或固定动态定位

Question

我即将在javascript中创建这个客户端小部件滑块。

当用户回答问题时，滑块会递增。

我可以让滑块背景变大和缩小，但我不确定的是“65％”指示器“粘”到蓝色div的末端，并自动移动为滑块背景增长和缩小。

由于这是javascript，我很酷动态设置指标的绝对位置。好吧，我还没有尝试过任何东西，因为我猜有很多方法可以实现这一点，所以想得到一些意见。我甚至考虑使用qTip ...但是很高兴看到这个用css作为一个浮动盒子固定在另一个盒子上

我想象改变两个并排div的宽度（完成与未完成），并使指示器相对于其容器绝对定位，以便随着宽度的变化而移动。

可能的？

这就是我所说的：

工作示例（感谢Philip的回答）

http://jsfiddle.net/HP7V9/

Answer 1

我可能只是使用jQuery将它锚定到加载的div的右边以及它的高度的中间点。

所以我们假设我们有这个DOM：

然后，假设你已经有了调整条形大小的逻辑，这个jQuery就可以了：

$("#loaded").resize(function(){
    var loadedDiv = $("#loaded");
    var loadedPosition = loadedDiv.position();
    var percentXPos = loadedPosition.left + loadedDiv.width() - $("#percent").width()/2;
    var percentYPos = loadedPosition.top + loadedDiv.height() / 2 - loadedDiv.height() / 2;

    $("#percent").css({
        position: "absolute",
        top: percentYPos.toString() + "px",
        left: percentXPos.toString() + "px"
    });
});

另外，我认为没有任何理由为未加载的部分设置div。你应该为整个条形成一个div并给它一个黑色背景，然后给加载的div一个更高的z-index和不同的背景颜色。

请记住，根据元素的边距，填充等，可能需要进行微调。