CSS - 頁腳顯示位置錯誤

Question

我想在底部和另一個div內顯示頁腳div，但是當我使用下面的代碼時，黑色頁腳顯示在div的頂部。

<div class="Background"> 
<div id="sitefooter"> 
<style> 
#sitefooter { 
position: relative; 
bottom: 0px; 
height: 130px; 
background-color: black; 
width: 100vw; 
} 
</style> 
</div> 
</div> 

我也試圖改變它的位置是：

position: absolute; 
bottom: 0; 

我的背景CSS如下：

.Background { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    width: 100vw; 
    height: 100vh; 
    background-image: url('resources/background.png'); 
    background-size: cover; 
    background-position: center; 
} 

如果有人能夠幫助這將是大。

感謝

Answer 1

div.Background必須有一個position:relative風格或一個div position: absolute內將無法正常工作。

.Background { 
 
    width:100%; 
 
    height:200px; 
 
    background:green; 
 
    position:relative; 
 
} 
 
#sitefooter { 
 
    position: absolute; 
 
    bottom: 0px; 
 
    height: 130px; 
 
    background-color: black; 
 
    width: 100%; 
 
    color:#fff; 
 
}

<div class="Background">This is the outer div, 
 
    <div id="sitefooter">This is the inner div.</div> 
 
</div>