将浮动div粘贴到另一个元素的当前位置

Question

我有一个带有滚动条的ul，上面有一个滚动条。

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

每个li都是可编辑的。单击li按钮时，右侧会显示div。 （菜单/选项）

我的问题是div只出现在li的orignal位置而不是li的当前位置。

我怎样才能使div（菜单/选项）始终显示在所选li的右侧？

编辑：我尝试使用jsfiddle但是我无法让Jquery使用它（我对jsfiddle不太熟悉）

以下是正在发生的事情的一个例子

第一：

第二：

第一张图片展示了它应该做的事情。但是，当您使用滚动条滚动时，下次单击“编辑”时，div（菜单）弹出窗口会显示错误的位置。 （见第2张图片）

Answer 1

这是我根据你所写的内容嘲笑的，但我希望你能了解如何实现它。主要概念是制作主菜单项position:relative及其子项目position:absolute。

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

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

Answer 2

你的浮动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');
});

Answer 3

你可以通过绝对和相对定位来做到这一点。

基本上，我有一个外部div，它包含可在两个方向上滚动的整个菜单（使用overflow: auto）。在里面，我有一个包含<li>元素的菜单容器。

li元素的样式具有相对位置。

点击li后，会向其添加另一个div .menu。该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");
    });
});

JSFiddle

---

在示例中，我将菜单添加到Click上，但是，您可以使用预先创建的菜单，只需使用.show() onClick显示它。