css - DIV定位(多个div，不同的Z索引)

这个问题已经被多次发布，但是我找不到一个可以帮助我找到解决方案的讨论。
#AnotherDiv移动后，如何消除底部的多余空间？
我也尝试了其他设置，例如使用外部div（宽度100％）并将#content和#AnotherDiv放在里面，但是#AnotherDiv根本不停留在底部（我使用了position absolute和bottom 0）。我只想在页脚div的底部对齐#AnotherDiv。

http://jsfiddle.net/bW7h2/10/

#AnotherDiv {
    position: relative;
    bottom: 200px;
    width: 100%;
    height: 200px;
    z-index: 1;
    background-color: #00FF00;
}

最佳答案

为您的margin-top: -200px;元素使用bottom:200px;而不是#AnotherDiv。
而且您在CSS中缺少一个;：

LIVE DEMO

#homepage{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0;
}
/* Header, Body, Footer */
#content {
    position: relative;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    background-color: #0000FF;
    z-index: 1;        /* 1 IS QUITE ENOUGH, SET '0' FOR #AnotherDiv */
}

#data {
    position: relative;
    width: 100%;
    min-height: 500px;
}
#footer {
    height: 200px;
    width: 100%;  /* MISSING ; */
    position: relative;
    background-color: gold;
}

#AnotherDiv {
    position: relative;
    width: 100%;
    height: 200px;
    z-index: 0;
    margin-top: -200px;  /* INSTEAD OF bottom:200px; */
    background-color: #00FF00;
}

关于css - DIV定位(多个div，不同的Z索引)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16133204/