Html 我无法关闭这个部门。。。为什么？_Html_Css

Html 我无法关闭这个部门。。。为什么？

html css

Html 我无法关闭这个部门。。。为什么？,html,css,Html,Css,所以我正在为自己开发一个投资组合网站，只是为了好玩，我已经开发了一个我非常喜欢的导航栏。现在，我似乎无法关闭整个导航条div父项，并且我插入的每个div似乎都作为子项出现在导航条div中，尽管我已经检查了大约20次以确保所有内容都已关闭。我是否在CSS中做了一些事情，迫使它保持开放并创建更多的子项如果您查看HTML代码，picture div会一直出现在我的导航栏中。这非常令人沮丧 <DOCTYPE html> <html> <head> <

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

如果您查看HTML代码，picture 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>

这是因为.nav元素是position:fixed。更改为位置：相对和完成

这是固定的

更新：

要在不影响其他元素的情况下固定.nav，您必须将.picture设置为相对，并从顶部留出一些边距

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

}

这里有一些关于定位的好帖子：

第一个选项：移除位置：固定；从导航

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

给你的身体添加填充物添加顶部：0英寸导航

如果你想得到这样的效果，你可以保持这个位置不变。但是，您需要考虑固定位置的元素会从文档流中移除。这就是为什么你的“图片”没有被推到你期望的位置，而且它似乎在你的导航中

这可以通过在身体上添加一个等于固定页眉高度的边距顶部，并将页眉的顶部值设置为0来轻松解决

我继续将您的代码复制到小提琴上，并添加了我的建议：

离题：我知道这不是codereview，只是因为我无能为力，但您的标记非常糟糕。您的导航是一个链接列表，应该类似于：

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

在css中，您为每个按钮编写所有样式，而大多数情况下，除了宽度之外，它们都是相同的。我感觉有一些改进的空间…

当你使用浮动时，它们会改变页面的布局。文档没有为它们呈现高度。在图片课上，你应该写清楚：两者都有；清除浮标并将导航位置更改为上述相对位置。像这样：

.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；然后给图片类一个70像素左右的上边距，即导航的高度。像这样：

.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;


}

我已经测试了这两个功能，它们都能正常工作：祝你好运：

我希望向下滚动时导航条在屏幕上保持静止。有没有其他方法可以在没有位置的情况下执行此操作：固定标签？编辑：这确实解决了问题，但现在我的导航栏在滚动时不会保持固定！如果他在上面添加了任何元素。图片，他同样需要添加填充。。相反，我在回答中提到了在主体{}@user3624485中添加填充below@Misters是的，我同意你的观点。我觉得最好给出一个证明未来的解决方案，因为当他在上面添加额外元素时，我不想让他再问另一个问题？你真的这么想。照片是唯一在他的导航下的东西？当然，他想要的是一个全面的修复，而不仅仅是一个补丁！然后你决定选择位置：相对，而不是仅仅增加一些利润顶部？你不会很快为我发展…那真的没有意义。我见过很多固定导航条，但我第一次看到这种行为。是的，非常奇怪。我做了另一个网站，导航栏是固定的，没有引起任何问题。我似乎找不到诊断！目前，我只是在构建未修复的站点，稍后我会解决这个问题。希望它不会回来困扰我@彼得：我想给出一个证明未来的解决方案。先生的回答提供了暂时的解决方案，因为他将顶部添加到了图片中。如果OP在上面添加了任何元素，那么他也需要添加top。所以我给身体本身添加了填充物。这也是我在回答中所做的，无论是在利润率最高的情况下，还是在同一个目标下。我真的没有得到反对票？。。。你得到了我的+1！顺便说一句，如果你想让你的答案非常完美，你应该删除0后面的px。0只是0，不需要单位-尝试将页边空白添加到正文，而不是将页边空白添加到图片顶部。因为如果用户在.picture上面添加任何DOM，那么他也需要在上面添加边距。因此，让答案是通用的&未来的证明。是的，我明白你的意思：

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

.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;

}

.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;


}