防止固定元素重叠

Question

我有一个移动网站的页脚div，需要位于屏幕的底部。 这是代码：

#footer {
position:fixed;
bottom:10px;
width: 95%;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
background:#fff;
min-width:240px;
border-radius:5px;
padding:3% 0;
}

它工作正常，但是当内容到达div时，它与我的页脚重叠。我想将我的页脚放在正常的内容流中，当它们到达时会紧跟其他内容。

Answer 1

z-index属性接受数字值。大多数人使用最高限制为9999，最低限制为-9999。

具有较高值的​​元素将显示在具有较低值的元素上方。

但是，您不能将父元素放在具有z-index的子元素上方。

#footer {
    z-index: 9999;
}

http://www.w3schools.com/cssref/pr_pos_z-index.asp

---

编辑：因为你说你希望它的行为像普通的div一样，试试这个

#footer {
    position: relative; 
    margin: 20px auto;
}

position：fixed基于窗口（屏幕大小）将元素设置到固定位置。它始终保持在您放置的位置。

Answer 2

将页脚的z-index设置为100

#footer {
    z-index: 100;
}

和现在重叠的div之一为1

#mydiv {
    z-index: 1;
}