将浮动的div固定在另一个元素的当前位置上

Question

我有一个带滚动条的li列表。

换句话说，你一次只能看到8个列表项，但可以通过滚动查看它们。

每个li都是可编辑的。单击li按钮时，会在其右侧出现一个div（菜单/选项）。

我的问题是该div仅出现在li的原始位置上，而不是li的当前位置。

如何使该div（菜单/选项）始终出现在所选li的右侧？

编辑：我尝试使用jsfiddle，但无法使Jquery工作（我对jsfiddle不太熟悉）。

以下是发生的情况的示例：

第一张图：

第二张图：

第一张图片显示了它应该实现的效果。但当你使用滚动条滚动后，下一次单击“编辑”时，div（菜单）会弹出在错误的位置上。（见第2张图片）

- user3329899

---

请与我们分享代码，最好能将其放入http://jsfiddle.net/。 - scx

好的，我很快地制作一个示例。 - user3329899

Answer 1

你的浮动div应该是绝对定位的，并且它应该在你的<li>标签内部。 你需要确保你的<li>标签不是静态定位，而是相对或绝对定位。那应该就能解决你的问题了。

http://jsfiddle.net/Jx3c5/

HTML：

<div id="box">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</div>
<div id="floaterThing"><input type="text"/></div>

CSS：

#floaterThing{
    display:none;
    position:absolute;    
    top: 0;
}
#box{
    width:400px;
    height:150px;
    overflow:scroll;        
}
li{
    position:relative;
    width:25px;
}

JS：

$(document).on('click', 'li', function(){
    var target = $(this),
        targetWidth = target.width();

   target.append($('#floaterThing'));
    $('#floaterThing').show().css('left', targetWidth+'px');
});

- carter

Answer 2

你可以使用绝对和相对定位来实现这个功能。

基本上，我有一个外部div，其中包含整个菜单，该菜单在两个方向上可滚动（使用overflow：auto）。 在其中我有包含

元素的菜单容器。 li元素使用相对位置进行样式设置。

当单击li时，另一个

被添加到它们中。 该div绝对定位于li的右侧，因此当它滚动时，它保持其位置。

$(document).ready(function(){

    $(".container > li").click(function(){
        $(".container li .menu").remove();

        $(".container > li.selected").removeClass("selected");

        $(this).append("<div class='menu'>");
        $(this).find(".menu").append("<li>Test</li><li>Test</li><li>Test</li><li>Test</li>");

        $(this).addClass("selected");
    });
});

{{链接1：JSFiddle}}

---

在这个例子中，我在onClick事件中添加了菜单，但是你也可以使用预先创建好的菜单，并在onClick事件中使用.show()方法来显示它。

- Liftoff

Answer 3

这是我根据你所写的东西所设计的，但我希望你能理解如何实现它。主要的概念是让主菜单项使用position:relative，而其子菜单项使用position:absolute。

http://codepen.io/nighrage/pen/FzKvb/

如果你能编辑你的html，这可以仅通过css实现。

- ramesh