Question

每次向下滚动时，我制作的导航栏也向下移动。当我调整窗口大小（更小/更大）时，即使我使用position:fixed，它仍然会移动。

我做错了什么？

＆＃13;

nav li:nth-child(1) {
  position: fixed;
  border: 1px solid #15317E;
  font-size: 30px;
  list-style-type: none;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 10px 10px 10px;
  width: 184px;
  background-color: #15317E;
  top: 20px;
  left: 220px;
}
a:link,
a:visited {
  text-decoration: none;
  color: white;
  margin-bottom: 1px;
}
a:hover,
a:active {
  color: white;
  background-color: #1569C7;
  width: 1000px;
}

＆＃13;

<nav>
  <li><a href="Team.html" title="Team">The Team</a></li>
  <li><a href="#Info">Information</a></li>
  <li><a href="#div">Community</a></li>
</nav>

＆＃13;

Answer 1

可能是显示器的屏幕尺寸。也许尝试像

这样的东西

@media (max-width: 1200px) {
    #nav {
   position:absolute;
   left:0%;
   top:10%;
   margin: 0px;
   padding: 0;
   border: 1px yellow;
   border-bottom: none;
   width:100%;
   z-index:9943;
}

}

z索引可能有助于解决重叠问题。如果你粘贴到https://jsfiddle.net/或者其他什么东西，我们会建议你再看看你的定位问题是什么。

Answer 2

固定位置是指浏览器窗口。使用此位置的元素始终可见。我认为你想要的位置是“绝对的”。 JSFiddle

nav li:nth-child(1) {
  position: absolute;
}

CSS位置修复不起作用

2 个答案: