DIV定位（多个div，不同的Z索引）

此问题已发布多次，但我找不到一个讨论，这将有助于我找到解决方案。在#AnotherDiv移动之后，我该如何摆脱底部的多余空间？我尝试其他设置，以及，像使用一个外的div（宽度100％）和放置#content和#AnotherDiv内，但随后的#AnotherDiv不停留在在所有的底部（I使用positionabsolute和bottom 0）。我想要的是让#AnotherDiv在页脚div的底部对齐。DIV定位（多个div，不同的Z索引）

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

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

来源

2013-04-21 Austin

我想你想设置'bottom'到'0px'（或只是将其删除），不是吗？ – ubik 2013-04-21 16:10:56

使用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; 
}

来源

2013-04-21 16:23:33

太棒了，谢谢！ – Austin 2013-04-22 12:53:06

@奥斯汀，不客气！ – 2013-04-22 13:03:33

我从您的评论理解什么是你想要做到这一点？

#AnotherDiv { 
    position: fixed; 
    bottom: 0px; 
    width: 100%; 
    left: 0; 
    right: 0; 
    height: 20px; 
    z-index: 101; 
    background-color: #00FF00; 
}

来源

2013-04-21 16:16:32 themunna

不固定，我不希望它出现在屏幕上的整个时间。它应该随着内容高度自动移动。 – Austin 2013-04-22 12:52:16

DIV定位（多个div，不同的Z索引）

回答

相关问题