css位置-顶部100%的Div

Question

我试图将div 100%放在页面内容的顶部。当内容有一定的余量时，问题就来了。我在这里用一个简化的例子来说明。

如果我理解，位置固定："元素是相对于浏览器窗口定位的"。那么，为什么div.trans会受到后面内容的影响呢？如何将div透明地放置在页面的100%和内容的顶部？

这里是一个查看问题并尝试解决方案的好地方：http://jsfiddle.net/rdkAW/1/

CSS：

body { margin:0; }
.trans{
    position:fixed;
    width:100%; height:100%;
    margin:0;
    opacity:0.7; filter: alpha(opacity = 70);
    background-color:red;
    z-index:5;
}
#content {
    position:relative;
    margin:30px auto; /* is this the problem? */
    width:95%; max-width:890px; height:1200px;
    z-index:1;
    background-color:blue;
}

HTML:

<div class="trans"></div>
<div id="content"></div>

Answer 1

如果我使用，问题就解决了。顶部：0；左：0；看来固定的职位需要这样。我仍然不太明白为什么。如果固定的div是100%，并且根据定义固定的位置是相对于窗口的，为什么需要指定顶部和左侧？如果有人能解释一下，我将不胜感激。