绝对位置 div 位于 IE7 中的文本框后面答案

【问题标题】：Absolutely position div sits behind textbox in IE7绝对位置 div 位于 IE7 中的文本框后面
【发布时间】：2011-10-27 00:34:22
【问题描述】：

我在使用绝对定位的自定义下拉菜单时遇到问题，在 IE7 中，div 位于一个普通文本框的后面，该文本框没有以任何特殊方式定位。我已经阅读了这个主题：IE7 puts absolutely positioned div underneath, ignores z-index 但解决方案对我没有帮助。

我的代码与提出上述问题的人之间的区别在于，我的 div 是通过 javascript 使用 document.write 创建并通过 appendChild 添加的

addEvent(document.getElementById("storeDown"), "click", showRegions);
var showRegions = function(e) {
        var dd = getTarget(e);
        if(document.getElementById("regionOptions")) {
            dd.parentNode.removeChild(document.getElementById("regionOptions"));
            regionsShowing = false;
        } else {
            var ddNode = document.createElement("div");
            ddNode.id = "regionOptions";
            ddNode.style.backgroundColor = offColor;
            var optNode;
            for(var region in storeList) {
                optNode = document.createElement("div");
                optNode.innerHTML = region;
                ddNode.appendChild(optNode);
            }
            dd.parentNode.appendChild(ddNode);
            regionsShowing = true;
        }
        cancelEvent(e);
    }

我的父 div 的 z-index 为 500，相对定位，regionOptions 定位为绝对，我也尝试向其添加 z-index，但没有任何区别。

【问题讨论】：

你说的不一样，还是和你链接的一样。给父节点一个 z-index 并将其设置为相对。
显然它确实有所不同，我在页面已经加载并且索引已分配给元素之后附加它，请查看下面的答案，谢谢！
我一直遇到动态内容的问题。您的解决方案只是更改了加载内容的位置，因此您避免了该问题。不了解您的 HTML 结构会使您的解决方案对其他人没有帮助。
我很乐意向您展示 HTML，但这是一个尚未上线的网站，并没有什么特别之处，它只是一个包含在包装器 div 和大约 10 个文本框中的表单对于姓名、地址、年龄等以及底部的 3 个按钮（提交、主页、重置），我将我的子节点附加到所有文本框之后的按钮 div，因此它位于代码的底部，然后绝对定位它。

标签： javascript html css internet-explorer-7

【解决方案1】：

好吧，终于弄明白了，我改变了它的附加位置，所以它在所有文本框之后附加在页面底部的一个 div 中（在我的例子中，一个按钮 div），所以现在不是 dd.parentNode.appendChild(ddNode)，而是 @ 987654322@，但还必须更改 CSS，使其相对于页面包装器而不是特定 div 进行绝对定位，并且似乎已修复它。

【讨论】：