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

我有一个box元素（实际上是一个带有一些

的

），我想在它上面创建一个文本区域，这样列表就可以编辑了

翻译功能（items->text；然后parse back text->items）已经完成（对于第二部分，所有
都将从文本中删除并重新创建）

但我不知道如何将此文本区域定位为列表上方的

编辑：

下面是一些代码：

<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>

待办事项列表
找到ol元素
在它之后添加文本输入
更改文本输入样式以将其放置在ol上
捕获ENTER或ESC（也可能是blur（））
如果是这样，那就放弃一切吧
如果输入（或blur（）），则清除所有li并重新创建它们
排除输入
var theol=$（'ol#theol'）；
var newlist=$（''）.insertAfter（theol）；
//如何将“新列表”准确定位在“theol”之上？

诀窍是：脚本被注入（通过bookmarklet），我无法控制预先存在的数据。此外，样式可能不像上面那样是静态的（边距、填充、宽度）。我还不知道，但我认为它的高度是可变的（根据内容进行调整）。
使用一个包含元素，如：

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

并确保宽度和高度匹配
无法理解。你能添加像图片这样的东西吗？添加你的代码好友。。。只有这样，我们才能提供帮助，或者建立一个JSFIDLE…我将尝试提出一个小代码。稍后再来，“宽度和高度匹配”是什么？
ul
元件？有没有办法在javascript中获取其维度？我正在扩充一个第三方网站，所以我无法控制它的风格。它成功了！将文本区域
宽度
和
高度
设置为100%
position:parent上的relative
是绝对必要的（它以前被设置为
static
；我在之前用
$（…）.css（'position'）
保存了设置，之后再恢复）<代码>z索引：1

在父级上不是必需的；我不知道那个元素是否已经设置好了。谢谢。

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

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