Html CSS将div的位置更改为绝对会破坏布局

我的页面底部有一个div（底部）

它有一个背景图像和另一个div（bottomnav），其中有一个无序的导航列表

当我将bottomnav的位置更改为绝对时，整个底部div向上移动到它上面的div中。另外，我还有一个部门叫cc。那个我可以毫无问题地改成绝对的

这是我的代码：

html

---

我对网页设计非常陌生，所以我不知道为什么将bottomnav改为绝对会改变布局。

如果您希望页脚在内容上始终位于底部，那么这将对您有所帮助

你需要改变你的结构

首先，你没有关闭#bottom

div

，其次，因为#bottom是

位置：相对的

，所以它里面的任何东西都是绝对相对于这个

div

。因此，从中删除页脚

div

HTML

<div id="bottom">
    <div id="bottomnav">
        <ul>
            <li><a href="index.html">Home</a>
            </li>
            <li><a href="services.html">Services</a>
            </li>
            <li><a href="contact.html">Contact</a>
            </li>
        </ul>
    </div>    
</div>
<div id="cc">©2014 European Homemakers</div>

---

你的预期输出是什么？我想让bottomnav有绝对位置，这样我就可以在底部div内移动它。我可以用cc来做，但它不适用于bottomnav。你期望这种输出吗？是的，但没有底部div向上移动，这就是发生在我身上的事情。

#bottom
{
background-image:url(../Images/home_bottom.png);
width: 960px;
margin-left:auto;
margin-right:auto;
min-height: 100px;
background-repeat:no-repeat;
position:relative;

}

#bottomnav
{
font-size: 20px;



}
#bottomnav ul {
list-style-type: none; 
height:auto;

}

#bottomnav li
{
display:inline; 
padding:20px;   
}

#bottomnav a {
text-decoration: none;
color: #FF9200;
}
#cc
{
text-align:right;
color: #FF9200;
position:absolute;
bottom: 5px;
right: 5px;
font-size:20px;
}

<div id="bottom">
    <div id="bottomnav">
        <ul>
            <li><a href="index.html">Home</a>
            </li>
            <li><a href="services.html">Services</a>
            </li>
            <li><a href="contact.html">Contact</a>
            </li>
        </ul>
    </div>    
</div>
<div id="cc">©2014 European Homemakers</div>

#bottom {
    background-image:url(../Images/home_bottom.png);
    width: 960px;
    margin-left:auto;
    margin-right:auto;
    min-height: 100px;
    background-repeat:no-repeat;
    position:relative;
}
#bottomnav {
    font-size: 20px;
}
#bottomnav ul {
    list-style-type: none;
    height:auto;
}
#bottomnav li {
    display:inline;
    padding:20px;
}
#bottomnav a {
    text-decoration: none;
    color: #FF9200;
}
#cc {
    color: #FF9200;
    font-size:20px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}