Javascript放置的输入元素在页面中的其他元素之上

Question

我有一个带有 css 制作的下拉菜单的网页，该菜单出现在 :hover 一些链接上。它工作正常，但如果我通过 javascript 在页面中放置一个 input 元素，它总是在下拉菜单上，无论我在菜单中设置什么 z-index。

有没有办法像普通输入一样将 input 以一种位于菜单后面的方式动态地放置在页面中？

谢谢

这是我用来添加输入的代码（可能不是世界上最好的代码，但它对我有用）。 Tools 是一个包含一些函数的小辅助对象

    var sels = null == arguments[0] ? document.querySelectorAll('[data-type=dinamiclist]'): document.querySelectorAll(arguments[0]);
for ( var i in sels ) {
    if ( isNaN(i) ) continue;
    setup(sels[i]);
}

function setup() {
    var e = arguments[0],
        S = e.tagName == 'select' ? true: false,
        t = document.createElement('input'),
        c = document.createElement('div'),
        l = document.createElement('ol'),
        sel = S ? e.selectedIndex || 0: e.value,
        ctrl = false,
        ctrlString = '',
        sall = false,
        durl = S ? '': e.getAttribute('data-url'),
        exp = e.hasAttribute('data-expar') ? e.getAttribute('data-expar'): false,
        plch = e.hasAttribute('placeholder') ? e.getAttribute('placeholder'): 'Ricerca',
        delayTimer
    ;

    if ( !S && ! e.hasAttribute('data-nodelprev') ) Tools.prev(e).style.display = 'none';
    c.setAttribute('class', 'dinamic-list');
    t.type = 'text';
    t.setAttribute('data-name', e.name);
    t.setAttribute('placeholder', plch);
    if ( e.hasAttribute('size') ) t.setAttribute('size', e.getAttribute('size'));
    t.addEventListener('keydown', find, true);
    t.addEventListener('keyup', find, true);
    t.value = S ? e.options[sel].text: e.hasAttribute('data-show') ? e.getAttribute('data-show'): e.value;
    c.appendChild(t);
    c.appendChild(l);
    Tools.parent(e).insertBefore(c, e);
    e.style.display = 'none';
    e.setAttribute('tabindex', '10000');
}