html - 为什么我的 'position: fixed' 导航栏不会保留在文档的中心？-6ren

html - 为什么我的 'position: fixed' 导航栏不会保留在文档的中心？

转载作者：行者123 更新时间：2023-11-28 01:12:49

24

4

我正在 freeCodeCamp 上做一个关于产品放置页面的元素。该页面现在要求我修复视口(viewport)顶部的 #navbar。虽然这适用于 position: fixed，但在我在 CSS 中添加固定位置后，导航栏不再保持在中心并向左移动。如果你删除 position: fixed;，你就会明白我的意思了。为什么会这样？

在添加固定位置之前，导航栏通过 margin-left: center;、margin-right: center; 居中(英式拼写 ;-})。我的视口(viewport)也有 800 像素宽和自动高度(即 BBC 风格)。

重要说明:我创建了一个 Logo ，随后将其添加到文档中，但这似乎没有显示(它由 tinypic 托管)。如果您看不到此 Logo ，它位于标题和视频之间。

附加信息:在我进行更改之前，我的视频居中。如果你也能帮助我，我将不胜感激。但这不是这个问题的重点。

#mainbody {
  width: 800px;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  font-family: garamond, serif;
}

#h1title {
  text-align: center;
  text-shadow: 16px 8px 16px;
  font-size: 38px;
  padding-top: 10px;
}

#header-img {
  display: block;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

  #nav-bar {
  text-align: center;
  position: fixed;
  right: 0;
  left: 0;
}

.nav-link {
  text-decoration: none;
  color: black;
  font-weight: 900;
}

.nav-link:hover {
  color: black;
}

.nav-button {
  -webkit-border-radius: 50%;
  background-color: orange;
  height: auto;
  width: 100px;
  transition: opacity 1s linear;
}

.nav-button:hover {
  background-color: white;
  opacity: 0.30;
}

#video {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#form {
  
}

legend {
  font-weight: 700;
}

#submit {
  margin-top: 5px;
}

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <title>Quality Prints</title>
  </head>
  <body id="mainbody">
    <a name="home-link"></a>
    <header id="header">
      <nav id="nav-bar">
        <button class="nav-button"><a class="nav-link" href="#home-link">Home</a></button>
        <button class="nav-button"><a class="nav-link" href="#">Products</a></button>
        <button class="nav-button"><a class="nav-link" href="#contact-link">Contact</a></button>
      </nav>
      <h1 id="h1title">Quality Prints ™</h1><hr />
      <img id="header-img" src="http://i66.tinypic.com/157ltle.jpg">
      
    </header>
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/CqtLKw7cJaY?rel=0&amp;showinfo=0&amp;start=5" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br />       
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <a name="contact-link"></a>
      <fieldset>
        <legend>Information Pack by Email</legend>
        <label for="emailme">Email Address:</label><br />
        <input name="emailme" type="email" id="emailmeinput" placeholder="Your email address"><br />
        <input type="submit" value="Send" id="submit" formaction="https://www.freecodecamp.com/email-submit">
      </fieldset>
    </form>
  </body>
</html>

我已经编辑以更正语法。正如 Andriy 所说，'.nav-button:hover' 之后缺少一个 '}'。我还添加了“左:0；”和“右:0；”到“#nav-bar”。

最佳答案

尝试添加零值的左右规则:

#nav-bar {
  text-align: center;
  position: fixed;
  right: 0;
  left: 0;
}

#mainbody {
  width: 800px;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  font-family: garamond, serif;
}

#h1title {
  text-align: center;
  text-shadow: 16px 8px 16px;
  font-size: 38px;
  padding-top: 10px;
}

#header-img {
  display: block;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

  #nav-bar {
  text-align: center;
  position: fixed;
  right: 0;
  left: 0;
}

.nav-link {
  text-decoration: none;
  color: black;
  font-weight: 900;
}

.nav-link:hover {
  color: black;
}

.nav-button {
  -webkit-border-radius: 50%;
  background-color: orange;
  height: auto;
  width: 100px;
  transition: opacity 1s linear;
}

.nav-button:hover {
  background-color: white;
  opacity: 0.30;
}

#video {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#form {
  
}

legend {
  font-weight: 700;
}

#submit {
  margin-top: 5px;
}

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <title>Quality Prints</title>
  </head>
  <body id="mainbody">
    <a name="home-link"></a>
    <header id="header">
      <nav id="nav-bar">
        <button class="nav-button"><a class="nav-link" href="#home-link">Home</a></button>
        <button class="nav-button"><a class="nav-link" href="#">Products</a></button>
        <button class="nav-button"><a class="nav-link" href="#contact-link">Contact</a></button>
      </nav>
      <h1 id="h1title">Quality Prints ™</h1><hr />
      <img id="header-img" src="http://i66.tinypic.com/157ltle.jpg">
      
    </header>
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/CqtLKw7cJaY?rel=0&amp;showinfo=0&amp;start=5" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br />       
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <a name="contact-link"></a>
      <fieldset>
        <legend>Information Pack by Email</legend>
        <label for="emailme">Email Address:</label><br />
        <input name="emailme" type="email" id="emailmeinput" placeholder="Your email address"><br />
        <input type="submit" value="Send" id="submit" formaction="https://www.freecodecamp.com/email-submit">
      </fieldset>
    </form>
  </body>
</html>

关于html - 为什么我的 'position: fixed' 导航栏不会保留在文档的中心？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52019600/

24

4

0

文章推荐： css - 在 tweetdeck 中更改水平滚动条颜色

文章推荐： javascript - 调用 Google Visualization API 服务器端

文章推荐： javascript - Angular JS - 显示/隐藏动态表的一些行

html - 在什么情况下使用 position :absolute, position :relative, position:fixed 和 position:static in css
我刚开始使用 html5 和 css，我对使用 css position 有点困惑。我可以从堆栈溢出中找到这些链接， Difference between relative and absolute
javascript - 相对于绝对值 : get the position that a relatively positioned element would have if it was absolutely positioned?
我想知道是否有一种方法可以获得相对定位的元素的“绝对位置”。我想不出任何方法，但也许有人想出了一个方法...... 最佳答案我不确定“绝对位置”是什么意思，但您可以使用 el.getBounding
CSS Positioning-Position 相对和绝对 Bootstrap
基本上我的 HTML(使用 Bootstrap 类)中有一个页面，其中包含使用 thumbnail 和 caption 类展示的产品。在产品图片上方有一个 ON SELL(圆形红色标签)。我给这个红色
Android BaseAdapter : position not really the position?
当我使用 BaseAdapter 的 ListView 离开屏幕时，每一行不再保持连续的位置。除了这个我不知道还能怎么解释。如果我的 BA/LV 在屏幕上显示 4 个项目，并且我添加了一个显示每一行
html - ie8 bug : fixed position div, inside relative position div, inside relative position floated div ... doesn't render
此 HTML 无法在 IE8 中正确呈现。它适用于 Firefox、Opera、IE7、IE9 和 IE10。 (当然，它在 IE6 中也不起作用，因为它涉及固定位置的元素。) 实际上它在 Chrom
position - Position Absolute的jQuery-Validation-Engine-表单字段的条件验证
我正在使用Position Absolute的表单验证引擎。我有一个特定的验证案例，希望可以为我解决。我需要能够根据另一个字段的值来使一个字段成为必需。例如: If country.dropdow
javascript - 三个JS : Screen position to camera position
我看过很多帖子，人们希望将相机位置调整到屏幕位置。我的问题是如何做相反的事情。我目前想要实现的是将“门”位置设置为屏幕的百分比，此计算已准备就绪，并且我确实有最终屏幕的 X、Y (px) 位置。相机
css - position :relative, position :absolute,与float的区别及影响
谁能解释一下使用 position:relative、position:absolute 和 float 对正常文档流及其子项的影响的区别？例如当我有三个元素 A、B、C 时，其中 A 是包含 B
css - Position Fixed with Position Relative 位置固定
我有以下代码: .tabs{ position: fixed; top:110px; left:0px; width:40px; z-inde
position - 后效应 : Move a layer after Position keyframes have been added
我不知道如何表达这个问题。所以这是一个例子。图层上的动画滑入 View ，然后稍微弹回。十分简单。位置关键帧看起来像这样: 关键帧 0:(-100,200) 关键帧 10:(100,200)
xslt - position()=1 工作正常，但不是 position()<5
我是 XSLT 的新手，我正在使用 w3schools 的“自己尝试”页面进行一些测试。我正在使用以下演示: http://www.w3schools.com/xsl/tryxslt.asp?xmlf
ios - Object1.position.y = Object2.position.y?
我试图让一个对象 1 (SKSpriteNode) 在某个高度(y 坐标)处创建另一个对象 (object2)。我已经得到了我需要的所有代码，除了我不知道如何正确编写: object1.positio
CSS: position:absolute inside position:relative，但不影响父级？
.special p { display:none; } .special:hover p { display:block; } Things
css - IE，Position absolute 继承 position from fixed
当将一个绝对定位元素放置在一个位置固定包装器中时，在一个位置相对包装器中，绝对元素位置不应该相对于相对 parent 而不是固定 parent ？ Content
html - Position relative 和 Position fixed 后面
我有一个 iframe，它在应用 css 后显示谷歌地图 position: relative; top: 48px; left: -233px; 但是当我向下滚动时，它刚好出现在显示 khaleej
html - position absolute inside position relative 在父级中给出元素范围
我在一个网站上工作，有一个带有 position:relative 的父元素，它有一个带有 position:absolute 的子元素。令我感到奇怪的是，对于我提到的位置，子元素似乎仍然可以识别它们
css - position: absolute inside position: relative 导致内容重叠
我有一个 main 元素，我已将其设置为 position: relative。这包含两个 div，然后我在其上应用 position: absolute。然后，这会导致夹在 main 元素中间的页眉
javascript - 任意定位显示的动画移动 :inline elements into a position:relative final position
HTML 代码由一个 div 组成，它具有两种类型的类:“隐藏”和“保留”。 Lorem ipsum dolor sit amet, consectetur adipis
javascript - 是否可以用 `position: absolute` 模拟元素的 `position: relative` 放置？
我必须开发一个生成表格(有点……)的软件，并且必须提供对元素位置的完全控制。到目前为止，我们有这样的构造: 还有一些javascript代码来放置#a , #b和 #c #co
html - Z-index in position fixed under position fixed 元素
我尝试将 z-index 设置为 body 下的某些位置为 fixed 的元素示例如下: HTML menu content ....

首页

博学

6Ren·AI

商城

html - 为什么我的 'position: fixed' 导航栏不会保留在文档的中心？