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>