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

Question

我的页面底部有一个 div(底部)。

它有一个背景图片和另一个带有用于导航的无序列表的 div(bottomnav)。

当我将 bottomnav 的位置更改为 absolute 时，整个底部 div 将向上移动到其上方的 div 中。另外，我还有另一个名为 cc 的 div。我可以毫无问题地更改为 absolute。

这是我的代码:

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 更改为 absolute 会改变布局。

Answer 1

Working Fiddle

首先你没有关闭#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;
}