css - 如何阻止页面上的内容移动？

Question

我创建了一个动画导航栏。

代码是:

#nav ul li a:hover{
    color: #000033;
    background-color:#bcbceb;
    width: 200px;
    border-radius: 0 1em 1em 0;       
    transition-property: width, color, background-color;
    transition-duration: 0.5s, 0.5s, 0.5s;
    transition-timing-function: linear, ease-in, ease in; 
    -moz-transition-property: width, color, background-color;
    -moz-transition-duration:  0.5s, 0.5s, 0.5s;
    -moz-transition-timing-function: linear, ease-in, ease in; 
    -webkit-transition-property: width, color, background-color;
    -webkit-transition-duration:  0.5s, 0.5s, 0.5s;
    -webkit-transition-timing-function: linear, ease-in, ease in; 
}

这是在页面的左侧。当每个导航链接向右移动时，它会将我在右侧的任何内容移动到右侧，而不是处于固定位置。我试过 position:fixed;但它似乎不起作用。

这是HTML

<ul>
    <li><h3><a href="index.html">Home</a></h3></li>
    <li><h3><a href="construction.html">Construction</a></h3></li>
    <li><h3><a href="it.html">I T Dept</a></h3></li>
    <li><h3><a href="web.html">Websites</a></h3></li>
    <li><h3><a href="cf.html">Company Forms</a></h3></li>
    <li><h3><a href="smf.html">Site Management Forms</a></h3></li>
    <li><h3><a href="phonebook.html">Phone Book</a></h3></li>
</ul>​

jsFiddle

#content 
{
    position: absolute;
    border: 1px solid #000033;
    padding:50px;
    display: block;
}

Answer 1

尝试将 position:relative 添加到您的 div 属性，然后添加位置，例如。 top:10px or left 10px, 取决于你想要它的位置，你也可以使用“bottom”属性来定位它..