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

【问题标题】：CSS Changing position of div to absolute ruins the layoutCSS 将 div 的位置更改为绝对会破坏布局
【发布时间】：2014-05-30 04:22:45
【问题描述】：

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

它有一个背景图像和另一个 div(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 更改为 absolute 会改变布局。

【问题讨论】：

你的预期输出是什么？
我希望bottomnav具有绝对位置，以便我可以在底部div内移动它
我可以用 cc 做到这一点，但它不适用于 bottomnav
codepen.io/anon/pen/gbwEf 你期待这样的输出吗？
是的，但没有让底部 div 向上移动，这就是发生在我身上的事情。

标签： html css

【解决方案1】：

Working Fiddle

首先你没有关闭 #bottom div，其次因为 #bottom 是 position: relative 所以里面的任何东西都将是绝对相对于这个 @ 987654324@。因此，删除页脚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;
}

【讨论】：

【解决方案2】：

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

DEMO

你需要改变你的结构。

【讨论】：