顶部固定位置

Question

我尝试在页面内容之上创建一个半透明的 div。这个 div 应该是窗口宽度和高度的 100%。

如果我将透明 div 放在它不会出现的内容之后。我不理解为什么？此 div 定位固定，根据定义固定位置“元素相对于浏览器窗口定位”

这可以通过将 .trans 放在 html 中的首位来解决，但这是一个非常复杂页面的简化案例。另一方面，我想了解这个问题。

那么为什么要先看到固定的 div？

来玩吧：http://jsfiddle.net/26dPg/

CSS：

body { margin:0; }

.trans{
    position:fixed;
    width:100%; height:100%;
    margin:0;
    opacity:0.7; filter: alpha(opacity = 70);
    background-color:red;
    cursor:pointer;
    z-index:5;
}

#content {
    position:relative;
    margin:30px auto;
    width:95%; max-width:890px; height:1200px;
    z-index:1;
}

HTML：

<div id="content"></div>
<div class="trans"></div> /*if this div goes after #content, this cannot be seen*/

Answer 1

在你的 .trans 类中，只需添加：

top:0;

Answer 2

只需将#content 的位置更改为absolute。

  body { margin:0; }

    .trans{
        position:fixed;
        width:100%; height:100%;
        margin:0;
        opacity:0.7; filter: alpha(opacity = 70);
        background-color:red;
        cursor:pointer;
        z-index:5;
    }

    #content {
        position:absolute;
        margin:30px auto;
        width:95%; max-width:890px; height:1200px;
        z-index:1;
        background-color:blue;
        cursor:pointer;
    }