javascript - 将动态文本区域精确定位在现有框元素上

Question

我有一个框元素(实际上是一个 <ol> 和一些 <li> s)我想在它上面创建一个文本区域，这样列表就可以编辑了。

翻译功能(元素->文本；然后解析回文本->元素)已经完成(对于第二部分，所有 <li> 都从文本中删除并重新创建)。

但我不知道如何将此文本区域准确放置在列表上。

编辑:

这是一些代码:

<h2>TODO List</h2>
<div id="container">
    <ol id="theol" style="margin-left: 10px; padding-left: 15px; width: 270px; border: 1px solid Gray;">
        <li><span>Locate the ol element</span></li>
        <li><span>Add the text input after it</span></li>
        <li><span>Change text input style to position it over the &lt;ol&gt;</span></li>
        <li><span>Capture ENTER or ESC (maybe blur() too)</span></li>
        <li><span>If ESC then just abandon everything</span></li>
        <li><span>If ENTER (or blur()) then clear all the &lt;li&gt; and recreate them</span></li>
        <li><span>Get rid of input</span></li>
    </ol>
</div>

<script src="http://cdn.jsdelivr.net/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<!-- injected script -->
<script type="text/javascript">
    var theol = $('ol#theol');
    var newlist = $('<textarea/>').insertAfter(theol);
    // how to position 'newlist' exactly over 'theol'?
</script>

诀窍是:脚本被注入(inject)(通过书签)，我无法控制预先存在的数据。此外，样式可能不像上面那样静态(边距、填充、宽度)。我还不知道，但我认为它的高度是可变的(根据内容调整)。

Answer 1

使用像这样的包含元素:

<div class="containingelement">
   <ul>
   </ul>
   <textarea></textarea>
</div>

并设置位置和 z-indexes 如下:

.containingelement{
   position:relative;
   z-index:1;
}

.containingelement textarea{
   position: absolute;
   z-index: 1;
   top:0;
   left:0;
}

并确保宽度和高度匹配