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

Question

我一直在自学 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;
}

Answer 1

起初这看起来可能是固定元素内部的定位。经过一番研究后，我想我找到了罪魁祸首......看来你的问题是“left:950px;” - 该值不会独立于浏览器，并且会改变结果/弹出具有特定宽度的元素。

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

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

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

此外，如果您想学习有关该主题的教程/类(class)，我在下面提供了一些过去对我有帮助的链接:

• http://www.codeschool.com/courses/journey-into-mobile (查看免费的第一课)
• http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-a-crash-course-in-css-media-queries/
• http://www.css-tricks.com/css-media-queries/

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

祝你好运!