Question

所以我正在为自己创建一个投资组合网站（只是为了好玩），我已经开发了一个我非常喜欢的导航栏。现在，我似乎无法关闭整个导航条div父级，并且我插入的每个div似乎都作为一个孩子出现在导航栏div内，即使我已经检查了大约20次以确保一切都关闭。我在CSS中做了什么，迫使它保持开放并创造更多孩子？

如果查看HTML代码，图片div会一直显示在导航栏中。这非常令人沮丧。

<DOCTYPE html> 
<html>
<head>

    <title>Jeff Lester | Portfolio</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

<body>

    <div class="nav">

        <div class="buttons">

            <div class="programming">
                <p><a href="#">Programming</a></p>
            </div>

            <div class="cinematography">
                <p><a href="#">Cinematography</a></p>
            </div>

            <div class="photography">
                <p><a href="#">Photography</a></p>
            </div>

            <div class="skills">
                <p><a href="#">Skills</a></p>
            </div>

            <div class="bio">
                <p><a href="#">Bio</a></p>
            </div>

            <div class="jeff_lester">
                <p><a href="#">Jeff Lester</a></p>
            </div>

        </div>

    </div>

    <div class="picture"><p>Picture</p></div>

</body>

</html>

body {
    background-image: url('retina_wood_@2X.png')
}

/* Navigation Bar */

.nav {
    background-color: #F5F5F5;
    height: 75px;
    width: 100%;
    position: fixed;
    line-height: 70px;
    border-top: 4px solid #6E94E6;
    border-bottom: 1px solid #DEDEDE;
    opacity: 0.80;
}

.nav a {
    color: #858585;
    text-decoration: none;
    display: block;
}

.nav a:hover {
    color: #303030;
}

/* Approx. 62% of page */
.nav .buttons {
    width: 1202px;
    margin: 0 auto;
}

.nav .buttons .programming {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-right: 1px solid #DEDEDE;
    float: right;
}

.nav .buttons .cinematography {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-right: 1px solid #DEDEDE;
    float: right;
}

.nav .buttons .photography {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-right: 1px solid #DEDEDE;
    float: right;
}

.nav .buttons .Skills {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-right: 1px solid #DEDEDE;
    float: right;
}

.nav .buttons .bio {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-left: 1px solid #DEDEDE;
    border-right: 1px solid #DEDEDE;
    float: right;
}

.nav .buttons .jeff_lester {
    background-color: #6E94E6;
    height: 70px;
    width: 100px;
    text-align: center;
    border-left: 1px solid #DEDEDE;
    border-right: 1px solid #DEDEDE;
    margin-right: 400px;
    float: right;
}

.nav .buttons .jeff_lester a {
    color: #F5F5F5;
}

.nav .buttons .jeff_lester a:hover {
    color: #303030;
}

Answer 1

那是因为.nav元素是position:fixed。已更改为position:relative并已完成

这里是固定的

http://jsbin.com/fokunixa/1/edit

更新

要修复.nav而不影响其他元素（在本例中为.picture），你必须设置.picture相对并从顶部给出一些余量。

.picture{
  position:relative;
  top:20px;

}

Here the example.

有一些很棒的帖子谈论定位：

Difference between style = "position:absolute" and style = "position:relative"

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 2

第一个选项：从position: fixed;

中删除.nav

DEMO

   .nav {
        background-color: #F5F5F5;
        height: 75px;
        width: 100%;
        line-height: 70px;
        border-top: 4px solid #6E94E6;
        border-bottom: 1px solid #DEDEDE;
        opacity: 0.80;
    }

如果您真的希望在滚动页面时修复.nav，那么

DEMO

为身体添加填充物

 body {
        background-image: url('retina_wood_@2X.png');
        padding-top: 80px;
     }

在top:0

.nav

.nav {
                    background-color: #F5F5F5;
                    height: 75px;
                    width: 100%;
                    position: fixed;
                    line-height: 70px;
                    border-top: 4px solid #6E94E6;
                    border-bottom: 1px solid #DEDEDE;
                    opacity: 0.80;
                    top: 0;
                }

Answer 3

如果您想要这种效果，可以保持位置固定。但是，您需要考虑固定定位元素是否已从文档流中取出。这就是为什么你的“图片”没有被推到你期望它的位置，它似乎在你的导航内。

这可以通过向您的身体添加margin-top等于固定标题的高度轻松解决，设置标题的top值为0 。

我继续将你的代码复制到一个小提琴并添加了我的建议： http://jsfiddle.net/uHFv4/

关闭主题：只是因为我无法帮助它，我知道这不是codereview，但你的标记非常可怕。您导航是一个链接列表，应该类似于：

   <nav>
        <ul>
            <li class="programming">
                <a href="#">Programming</a>
            </li>
            ...

在你的CSS中，你为每个按钮编写了所有的样式，而除了宽度之外，它们通常都是相同的。我觉得那里有一些改进空间...

Answer 4

使用浮动时，它们会更改页面的布局。文档不会为它们渲染高度。在图片类中你应该写清楚：两者;清除浮子并将导航器的位置更改为相对位置，如上所述。像这样：

.nav {
    background-color: #F5F5F5;
    height: 75px;
    width: 100%;
    position: relative;

    line-height: 70px;
    border-top: 4px solid #6E94E6;
    border-bottom: 1px solid #DEDEDE;
    opacity: 0.80;

}

.picture{
    position: relative;
    clear: both;

}

如果您希望将标题保持为固定位置，则可以指定它保留在文档的顶部，顶部为：0px;然后给图片类一个70px左右的上边距，即导航的高度。像这样：

.nav {
    background-color: #F5F5F5;
    height: 75px;
    width: 100%;
    position: fixed;
    top: 0px;

    line-height: 70px;
    border-top: 4px solid #6E94E6;
    border-bottom: 1px solid #DEDEDE;
    opacity: 0.80;

}

.picture{
    position: relative;
    margin-top: 70px;


}

我已经测试了这两个并且他们工作:)祝你好运：）

我不能让这个div关闭......为什么？

4 个答案: