为什么将元素设置为position:fixed会改变其宽度?我知道HTML元素在默认情况下跨越浏览器窗口的整个宽度，但是当我将标题上的位置设置为固定时，<div>缩小到零宽度。为什么会这样?
尝试width:auto不解决它，<div>仍然有零宽度!
这个例子取自Code Academy在他们的Web基础课程结束时的"构建简历"项目。
我有一个像这样的HTML文件:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
和如下的CSS文件:
div {
border: 5px solid red;
border-radius: 5px;
}
#header{
height:30px;
background-color:orange;
z-index:1;
}
#footer{
height:30px;
background-color:teal;
clear:both;
}
.left{
height:300px;
width:200px;
float:left;
}
.right{
height:300px;
width:200px;
float:right;
}
更新:我注意到设置width:100%确实保持了整个浏览器窗口的宽度。这是怎么回事?为什么固定定位会改变元素的宽度?但我不确定这在这里如何适用。
width:auto不同于width:100%。width:auto将元素的宽度扩展到其包含块内的所有水平空间。由于空格位于包含块的内部，所以它不计算边框/填充/边距。
width:100%做width:auto做的和添加包含元素的边框/填充/边距的宽度。width auto和width 100%的区别提供了一个很好的视觉演示。
因此，当我在position:fixed元素上设置width:auto时，position:fixed收缩包装元素的宽度为其内容的宽度(这是什么)，然后宽度自动调整为包含元素的宽度，在这种情况下是_________(什么?为什么它的宽度为0呢?
当我将其设置为width:100%，然后它包括padding/margin/border的_________(什么?为什么它会扩展到水平覆盖整个页面呢?
原因是fixed和absolute的定位都将元素从文档流中取出。这样做的剩余效果是，除非另有明确说明，元素现在将根据其内容的大小而不是其父元素的大小来增长/缩小。
.fixed-element{
position:fixed;
width:100%
}
解决关于固定定位的报价问题:
带有position:absolute的元素的位置和尺寸是相对于它的包含块的，而带有position:fixed的元素的位置和尺寸总是相对于初始包含块的。这通常是视口:浏览器窗口或纸张的页面框。
实际上我觉得它的措辞很差。这并不是说尺寸会增长到视口的大小。相反，它试图区分absolute和fixed定位之间的具体差异。更彻底地说:fixed元素的尺寸/大小将始终相对于初始元素。然而，absolute元素的尺寸/大小将相对于包含它的元素。这并不意味着它会实际上在默认情况下占用100%的视口
这是默认行为。
阅读http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning Specifying_dimensions
绝对定位元素将收缩包装以适合其内容除非你指定它们的尺寸。可以指定宽度设置左和右属性，或通过设置宽度财产。可以通过设置top和bottom来指定高度属性，或者通过设置height属性。