CSS導航絕對/定位問題？

我一直在教自己的CSS，並決定嘗試使用迄今爲止我所知道的網站。所以我決定製作一個跟蹤網絡瀏覽器位置的固定導航欄，然後我遇到了一個問題。無論出於何種原因，當我更改瀏覽器窗口大小時，我添加的其中一個鏈接不會停留在導航欄內。有人可以看我的代碼嗎？請忽略馬虎，因爲我只是第一次嘗試這個。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; 
}

（跳過了「1類」的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; 
}

來源

2012-09-24 Tom Maxwell

起初，這似乎可能是固定元件內部的定位。仔細觀察這一點之後，我想我已經找到了罪魁禍首......看起來你的問題似乎是'left：950px'' - 這個值不會獨立於瀏覽器，並會改變結果/彈出具有一定寬度的元素。

Like Libin提到過，您希望使用關係值而不是固定值查看Fluid Layout設計。因此，當您重新調整瀏覽器時，所有設置都是正確的。

開始查看媒體查詢&使用關係值（如％和Ems）。

下面是轉換像素值，以EMS等有用的資源：http://pxtoem.com/

此外，如果你想通過教程/關於這一主題的課程，我已經包括了一個鏈接夫婦低於已經在幫我過去：

而且， - 這裏的證明，使用絕對&相對不固定的導航欄裏面正常彈出：http://jsfiddle.net/JQT7u/2/

祝您好運！

來源

2012-09-24 07:09:24

是的，你現在正在談論我遇到的問題。我會研究它。謝謝！ –

今天早上醒來後，一夜的壓力，看着你把我聯繫起來的資源，並解決了問題！太感謝了！！ –

最近的回覆，但你是受歡迎的湯姆！：） –

如果您試圖製作一個跟隨Web瀏覽器位置的固定導航欄，則應該使用%值而不是px值。

Check this demo

在該演示中，我改變了價值觀％，去除等

希望絕對某個位置，這是你想什麼。

來源

2012-09-24 06:07:23 Libin

問題是，當您調整瀏覽器窗口的大小時，#secondnavlinks div不會保留在導航欄內 - 它會從右側切斷。我測試了固定滾動，並且工作正常，但我不知道爲什麼#secondnavlinks不會留在欄本身內。有什麼建議麼？ –

在我的演示中，#secondnavlinks留在裏面，對嗎？ – Libin

檢查這個link

你想這樣嗎？

從你的問題中不清楚設計應該如何。

順便說一句，鏈接出來，因爲你給內部div的position:absolute。所以這些鏈接與主分區Nav失去了聯繫。

如果你想了解更多關於在CSS中定位的工作，然後通過這個link。

來源

2012-09-24 06:07:59

CSS導航絕對/定位問題？

回答

相關問題