Question

我真的很困惑定位div。当我尝试将标题固定在顶部，但标题后面的另一个div时，它被拧紧并占用了很多空间..

<div id="header">
    <div id="header-center">
        <div id="headerleft">
            <h1> <a href="link"> LOGO </a> </h1>
        </div>

        <div id="nav">
            <ul>
                <li> <a href="link" LINK </a> </li>
                <li> <a href="link" LINK </a> </li>
                <li> <a href="link" LINK </a> </li>
                <li> <a href="link" LINK </a> </li>
                <li> <a href="link" LINK </a> </li>
             </ul>
         </div>
    </div>
</div>

<div id="article">
    <p> HELLO </p>
</div>

这是我的CSS

#header {
height:60px;
backgroundcolor:rgba(51,102,153,1);
color:#FFF;
position:fixed;
bottom:0;left:0;right:0;top:0;
z-index:9999;
}

#article {
margin:0 auto;
}

这是我的JSFIDDLE。

所以，我不知道我需要把位置固定，绝对，相对于哪个div。当我们向下滚动时，我很困惑，因为我想把标题放在顶部。

有什么想法吗？

感谢。

Answer 1

你很亲密。首先，关闭所有锚标记：

                <li> <a href="link"> LINK </a> </li>
                <li> <a href="link"> LINK </a> </li>
                <li> <a href="link"> LINK </a> </li>
                <li> <a href="link"> LINK </a> </li>
                <li> <a href="link"> LINK </a> </li>

接下来，你需要确保页面足够长，需要滚动。

看看这个： http://jsfiddle.net/8kkS6/4/

 <div id="article">
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
    <p> HELLO </p>
</div>

然后为了确保标题不与正文文本重叠，你需要在顶部为主体添加一些填充：

body{
    padding-top:60px;
}

Answer 2

#header {
    height:60px;
    backgroundcolor:rgba(51,102,153,1);
    color:#FFF;
    position:fixed;
    left:0;
    right： 0;
    top:0;
    z-index:9999;
}
#header-center {
    margin: 0 auto; width: 960px;
}
#headerleft {
    float: left;
}
#nav {
    float: left;//this depends on what your design looks like!
}
#article {
    margin:60px auto 0;
}

固定位置需要很大的空间

2 个答案: