CSS导航绝对/固定定位问题？答案

【问题标题】：CSS navigation absolute/fixed positioning issue?CSS导航绝对/固定定位问题？
【发布时间】：2023-03-18 01:40:01
【问题描述】：

我一直在自学 CSS，并决定尝试利用我目前所掌握的知识创建一个网站。所以我决定做一个固定的导航栏，跟随网络浏览器的位置，我遇到了一个问题。无论出于何种原因，当我更改浏览器窗口大小时，我添加的链接之一不会留在导航栏中。有人可以看看我的代码吗？请忽略草率，因为我只是第一次尝试。

这是我的 HTML。 “secondnavlinks” div id 不会留在导航栏中：

<div id="nav">

<div id="secondnavlinks">
<ul>
<li><a href="#">Ambient Bookmarklet</a></li>
</ul>
</div>


<div id="class1">
<ul>
<li><a href="#">Saved</a></li>
<li><a href="#">Folders</a></li>
</ul>
</div>

<div id="header">
<img src="ambientfollowhead.gif" alt="ambientfollow" width="160" height="35" />
</div>



</div>

这是 CSS：

#nav {
position: fixed;
border: 1px solid #DDDDDD;
top:-1px;
left:109px;
width:85%;
height: 46px;
background-color: white;
z-index: !important 99;
}

（跳过“class1”div）

#secondnavlinks ul {
position: absolute;
display: inline;
list-style-type: none;
}



#secondnavlinks ul li {
display: inline;
text-align: center;
float: left;
font-family: klavika-light;
list-style-type: none;
position: absolute;
left: 950px;
white-space: nowrap;
}

#secondnavlinks ul li > a {
text-decoration: none;
color: inherit;
}

【问题讨论】：

标签： css positioning css-position absolute

【解决方案1】：

起初这似乎是固定元素内部的定位。稍微研究了一下，我想我找到了罪魁祸首......看起来你的问题是'left：950px;' - 这个值不会独立于浏览器，并且会改变结果/弹出具有特定宽度的元素。

就像 Libin 提到的，您希望使用关系值而不是固定值来研究流体布局设计。因此，当您重新调整浏览器时，一切都已正确设置。

开始研究媒体查询和关系值的使用，例如 % 和 Ems。

这是将 px 值转换为 em 等的有用资源：http://pxtoem.com/

此外，如果您想浏览有关该主题的教程/课程，我在下面提供了一些过去对我有帮助的链接：

另外， - 这是使用绝对和相对不会在固定导航栏中正常弹出的证据：http://jsfiddle.net/JQT7u/2/

祝你好运！

【讨论】：

是的，你很清楚我遇到的问题。我会调查的。谢谢！
今天早上经过一夜的压力醒来，查看了您链接到我的资源，并解决了问题！谢谢一百万！
迟到了，但不客气，汤姆！ :)

【解决方案2】：

如果您尝试制作一个跟随网络浏览器位置的固定导航栏，您应该使用% 值而不是px 值。

Check this demo

在那个演示中，我将值更改为 %，删除了一些绝对位置等。

希望这是你正在尝试的。

【讨论】：

问题在于，当您调整浏览器窗口的大小时，#secondnavlinks div 不会留在导航栏内——它会从右侧被截断。我已经测试了固定滚动并且效果很好，但我不知道为什么#secondnavlinks 不会留在栏本身内。有什么建议吗？

【解决方案3】：

检查这个link

你想要这样吗？

从您的问题中不清楚设计应该如何。

顺便说一句，链接出来是因为你提供了内部 div 的position:absolute。所以链接失去了与主 div Nav 的关系。

如果您想了解更多关于 CSS 定位工作的信息，请查看link。

【讨论】：