我有一個<div>，它的寬度設置爲100%。當我將position:fixed添加到它時，寬度變爲16px更大。爲什麼固定位置會改變元素的寬度？
我注意到在身體上，所有邊都有邊距，所以我猜想position:fixed在某種程度上忽略了包含它的身體標記的邊距。
我看着MDN Reference，但無法找到解釋發生了什麼的任何事情。
有什麼position:fixed更改爲導致此行爲的<div>？
實施例：http://jsfiddle.net/UpeXV/
body自動有一個邊距8px。所以當你將你的元素的width設置爲100%時，它就變成了身體的寬度，兩邊減去8px。
但是，當您給出元素position:fixed時，它不再是相對於主體而是相對於沒有邊距的視口進行設置的。所以width現在是視口的寬度，它是2 * 8px更寬 - 您觀察到的16px。
這裏的W3 documentation on the subject：
鑑於位置和元件的尺寸與位置是：絕對是相對於它的包含塊的位置和與位置的元素的尺寸：固定總是相對於初始包含塊。這通常是視口：瀏覽器窗口或紙張的頁面框。
正是我懷疑，謝謝:) – 2013-05-08 13:58:46
這有助於我瞭解當CSS中的位置發生更改時，究竟發生了什麼，感謝您的時間 – 2013-05-08 14:05:03
@ChrisB，很高興爲您提供幫助！ – ASGM 2013-05-08 14:54:40
它看起來當你的元素設置爲position:fixed等，它需要在視口上，而不是它的父的寬度。
固定定位與絕對定位類似，只是元素的包含塊是視口。
感謝您的意見。
這是固定元素的默認行爲，因爲固定元素不會將其自身的上下文定位到其最近的定位父級，而是視口，從而在窗口中得到修復。正如您自己指出的那樣，16px的寬度來自事實，身體的默認邊距爲8px。
如果需要固定的元素是100％的寬度，你還是要空間，您可以考慮使用box-sizing: border-box。然後使用填充而不是邊距來創建空間。這將允許固定元素跨越頁面的寬度而不會超過。除非使用border-box模型，邊距和邊框以及填充總是添加到元素的尺寸中，在這種情況下，寬度將包括填充和邊框。
大膽猜測：你不再用'body'的填充處理所以'寬度：100％'很可能使用窗口寬度現在。 – 2013-05-08 13:50:21
聽起來像預期的行爲？它擴展到文檔寬度的100％。 – 2013-05-08 13:50:25
@皮卡웃我並不是說這不是預期的行爲，我只是想了解*爲什麼會發生這種情況 – 2013-05-08 13:51:11