Html div覆盖定位？

有没有办法防止主包装与页脚重叠？页脚必须保持和位置：绝对，以便在浏览器底部保持齐平

#page_contain {
    min-height: 100%;
    position: relative;
}

#main_wrapper {
    width: 950px;
    height: 800px;
    margin: 0 auto 25px auto;
    position: relative;
    border: 1px solid #000;
}

#footer {
    position:absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    text-align: center;
    font-family: Verdana;
}

html

第1行

第2行

第2行

第2行

第2行

第2行

将

z-index

属性应用于页脚：

#footer{
    [...]
    z-index: 50;
}

---

将

z-index

属性应用于页脚：

#footer{
    [...]
    z-index: 50;
}

---

解决此问题的更好方法是对页脚应用固定定位，使其始终位于屏幕底部。以下是您在JSFIDLE中的代码：

---

解决此问题的更好方法是对页脚应用固定定位，使其始终位于屏幕底部。以下是您在JSFIDLE中的代码：

---

---

我真的认为，要回答这个问题，就必须看HTML。@RichardJPLeGuen不太可能，它们只是div，div的内容不重要。这个问题可以用3个id为'sOk'的空div复制，但是它们在HTML文档中的什么位置？哪一个是第一个、第二个还是最后一个？还有其他非静态定位元素吗？@RichardJPLeGuen我添加了一些html代码示例，我真的认为必须看到html才能回答这个问题。@RichardJPLeGuen不是真的，它们只是div，div的内容不重要。这个问题可以用3个id为'sOk'的空div复制，但是它们在HTML文档中的什么位置？哪一个是第一个、第二个还是最后一个？还有其他非静态定位的元素吗？@RichardJPLeGuen我添加了一些示例html代码，但没有工作，仍然重叠。。。例如，根据浏览器的大小，您可能必须将主包装高度增加到900。SDDSD对我来说很好。事实上，由于自然的文档流，即使没有z索引，它也可以正常工作。您一定在做其他事情。您是否填写了一些行？我的屏幕相当大，所以即使在900px，我也看不到重叠，但是如果我将浏览器设置为800px高度，我可以看到重叠，你能给我看一下你的工作示例吗？我只是做了一个基本的空div，但它不起作用。不起作用。仍然重叠。。。例如，根据浏览器的大小，您可能必须将主包装高度增加到900。SDDSD对我来说很好。事实上，由于自然的文档流，即使没有z索引，它也可以正常工作。您一定在做其他事情。您是否填写了一些行？我的屏幕相当大，所以即使在900px，我也看不到重叠，但是如果我将浏览器设置为800px高度，我可以看到重叠，你能给我看一下你的工作示例吗？我只是做了一个基本的空div，但它不起作用

#page_contain {
    min-height: 100%;
    position: relative;
}
#main_wrapper {
    width: 950px;
    height: 100%;
    margin: 0 auto 25px auto;
    position: relative;
    border: 1px solid #000;
    padding-bottom:100px;
}
#footer {
    clear:both;
    position:absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    text-align: center;
    font-family: Verdana;
}