Question

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

如果我把透明div放在内容之后就不会出现了。我不懂为什么？这个div是固定的，根据定义固定位置“元素相对于浏览器窗口定位”

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

那么为什么首先应该看到固定的div？

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;
    }

固定位置在顶部

2 个答案: