CODEWITHSUNDEEP
csscss-position
Nrc
Nrc

Reputation: 9797

Fixed position on top

I try to create a div semi transparent on top of the content of a page. This div should be 100% the width and hight of the window.

If I put the transparent div after the content it does not appear. I do not understand why? This div is positioned fixed and by definition fixed position "The element is positioned relative to the browser window"

This can be solved just putting .trans first in the html, but this is a simplified case of a much complex page. On the other hand, I would like to understand the problem.

So why a fixed div should be first to be seen?

Here is to play: 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*/

Upvotes: 0

Views: 127

Answers (2)

Ritooon
Ritooon

Reputation: 155

In you .trans class, just add : 

top:0;

Upvotes: 1

shakhrillo
shakhrillo

Reputation: 37

Simply change #content position to 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;
    }

Upvotes: 0

Related Questions