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

Question

我在页面底部有一个div（底部）。

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

当我将bottomnav的位置更改为绝对位置时，整个底部div都会向上移动到其上方的div中。 另外，我还有一个称为cc的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 id="cc">©2014 European Homemakers</div>

这是我的CSS：

#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;
}

我是网页设计的新手，所以我不确定为什么将bottomnav更改为绝对会更改布局。

Answer 1

工作小提琴

首先，您没有关闭#bottom div ，其次，因为#bottom是position: relative所以其中的任何东西都相对于此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>

CSS

#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;
}

Answer 2

如果您希望页脚始终放在最底层，那么这将为您提供帮助。

DEMO

您需要更改您的结构。