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索引）

回答

相關問題