Help with Positioning an Overlay ontop of page

Hello,
I was working with a layout that I was introduced to through this forum here: http://www.pmob.co.uk/temp/roundshadow-oneimage-centred-nav.htm
And one of the things I was planning on adding was an overlay with a sliding message box. later-on this message box would hold a login form. However my problem lies with positioning the overlay and the slideDown container / message box.

First I apologise for my inline styling, I know its a bad habit, but I remove it after I know the styling works

As you can see here in this file where my overlay works properly alone. My overlay is hidden on document load by javascript and appears on clicking of the trigger. By properly working, I mean in covers the background of the wrapper div it is inside of.

Now when I try to fuse this layout and this overlay together, my problem occurs: as seen here.
What happens in that overlay is hidden on document load, but it pushes the content down instead of appearing above it. I believe this is a positioning problem in the CSS or it may just be where I put the divs that are my overlay and slideDown Box in the html

I hope you can help me position the overlay div properly so that it is placed above my page when it is shown.

Thanks in advance,
Team 1504

Oh and source-order wise I like to put my ‘fixed’ elements AFTER my pagewrapping div, that way I don’t have to dick with z-index.
Thanks for your thoughts on this DS.

Here is the code I’m working with in my explanation below.

For starters IE6 is getting a dumbed down version of the whole page due to the shadow images on the #middle div. That is not related to the thread topic and I did not write the code for that. Taking that into account it is the reason I choose to go with fixed positioning for browsers that support it (which is all current browsers). I know about fake fixed for IE6 and moving the scrollbars to a new pagewrapping div.

There are some other things going on here that will require the overlay div to have it’s z-index set manually even if it comes last in the source. I do agree that it would be better to have it at the end, but that is not going to be a cure all to eliminate z-index with THIS layout.

Technically that #clickme ID for the overlay script should really be nested inside the .content div in the working layout. The OP (and me) had it nested in the <div class=“d”> as a sibling with the .content div. When the shadow images are in place the #clickme ID will not look right there. It NEEDS to be nested in the .content div as shown below.

    <div id="middle">
        <div class="a">
            <div class="d">
                [B]<div class="content">[/B]
                    [COLOR=Blue]<p id="[B]clickme[/B]">Click to view the overlay</p>[/COLOR]
                    <p>Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli enim tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. In at Maecenas porttitor dui libero vel eros et quis condimentum. Et tempor ac vitae ut Vestibulum fa</p>
                    [COLOR=Red][B]<div class="c">[/B]<span></span><b></b><i></i></div>[/COLOR]
                [B]</div>[/B]
            </div>
        </div>
    </div>

After doing that the <div class=“c”> presents a problem since it is set to 100% width and height with absolute positioning. It is layering above the #clickme ID rendering it unclickable. The #clickme needs to have it’s z-index set manually in this case, you will also notice that for the same reason none of the text in that content div is selectable.

[COLOR=Red][B].c[/B][/COLOR] {
[COLOR=Blue]    width:100%;
    height:100%;
    position:absolute;[/COLOR]
    left:0;
    top:0;
    right:0;
}

To get around that we need to set a z-index on #clickme


    #clickme {
        [COLOR=Blue]position:relative;
        z-index:1;[/COLOR][COLOR=Black]/*needed for nesting INSIDE #content to[COLOR=Red] layer above AP [B].c[/B] sandbags[/COLOR]*/[/COLOR]
        font-weight:bold;
        text-align:center;
    }

Due to the nature of the layout (which I did not build) it is going to require a z-index to be set on the overlay div now that z-indexes were set in the .content elements. Ironically OPERA seems to be the only one that needs it even when the overlay comes last in the source.

But without it OPERA allows the #clickme text to show in the pop-up box.
Indeed that is a fixed positioning bug in OPERA because the z-index is not needed if AP is used. However, Opera is easily fixed with a z-index.


[B]#overlay, #opaque[/B] {
    position:fixed;
    [COLOR=Blue]z-index:2;/* layer above #clickme for OPERA*/[/COLOR]
    top:0;left:0;
    width:100%;
    height:100%;
}

Complete code (working in all current browsers) with overlay last in source, same as link at the beginning of this post.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Transparent Shadow all around with one image - (Not IE6)</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="assets/scripts/js/shortcuts.js"  charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#overlay').hide();
   $('#box').hide();
});
</script>

<script type="text/javascript">
$(function () {
    $('#clickme').click(function() {
      $('#overlay').fadeIn("fast");
      $('#box').slideDown("slow");
    });
});
$(function () {
    $('#close').click(function() {
      $('#overlay').fadeOut("fast");
      $('#box').slideUp("slow");
    });
}); 
</script>

<style type="text/css">
* {
    margin:0;
    padding:0;
}
html,body {
    height:100%;/*reference height for overlay in IE6*/
}

body {
    background:#fffccc;
}
p {
    margin:0 0 1em
}
h1 {
    text-align:center;
    margin:0 0 20px;
}

/*=== Begin Overlay Styles ===*/
#overlay, #opaque {
    position:fixed;
    z-index:2;/* layer above #clickme for OPERA*/
    top:0;left:0;
    width:100%;
    height:100%;
}
* html #overlay, * html #opaque {
    position:absolute; /*IE6 does not suport fixed positioning*/
}
    #opaque {
        opacity:0.65;
        -ms-filter:"alpha(opacity=65)"; /* IE8 */
        filter:alpha(opacity=65); /* IE6/7 */
        background:#000;
        z-index:1;/* layer #opaque below #box */
    }
    #box {
        position:relative;
        z-index:2;/* layer #box above #opaque */
        width:420px;
        height:214px;
        top:30px; 
        margin:0 auto;
        background:#fff;
        border:1px solid #000;
    }
    #box p {
        margin:1em;
        font-weight:bold
    }
    #close {
        position:absolute;
        right:0;
        bottom:0;
        color:red;
    }
    #clickme {
        position:relative;
        z-index:1;/*needed for nesting INSIDE #content to layer above RP .C sandbags*/
        font-weight:bold;
        text-align:center;
    }    

/*=== Begin Page Layout ===*/    
#wrap {
    min-width:800px;
    max-width:1500px;
    margin:auto;
    overflow:hidden;/*contain floats*/
}
#middle {
    min-height:0;
    overflow:hidden; /*prevent sliding under floated columns*/ 
    padding:0 30px 0 0;
}
.a, .d, .c b, .c span, .c i {
    position:relative;
    background: url(images/team-intro2.png) no-repeat;
    width:100%;
}
.a {
    margin:15px auto 40px;
    clear:both;
    min-width:300px;
    width:auto;
}
.d {
    background-position:100% 100%;
    position:relative;
    top:30px;
    left:30px;
}
.content {
    min-height:410px;
    margin:0 8px 9px 0;
    padding:20px;
    text-align:justify;
    position:relative;
    top:-11px;
    left:-11px;
    background:#FFF;
}
.c {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    right:0;
}
.c span, .c b {
    width:32px;
    height:32px;
    background-position:100% 0;
}
.c span {
    float:right;
    margin:-21px -21px 0 0
}
.c b {
    position:absolute;
    left:-21px;
    bottom:-13px;
    background-position:0 100%;
    clear:both
}
.c i {
    position:absolute;
    left:-3px;
    bottom:15px;
    background-position:-18px 99%;
    height:80px;
    width:15px;
}
/* left and right columns */

#left, #right {
    float:left;
    width:210px;
    background:red;
    border:1px solid #000;
    min-height:450px;
    margin:30px 10px 0;
    display:inline;
}
#right {
    float:right;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
* html .content {zoom:1.0;padding:25px 45px 25px 25px;background:none;}
* html .c, * html .c * {
    display:none;
}
* html #wrap,* html #middle{zoom:1.0;padding:0}
* html #middle{    margin:0 220px 0 220px;}
* html .a {background:#fff;border:1px solid #000;}
* html .d{background:none;}
.c b {
    left:-21px;
    bottom:-22px;
}
.c i {
    left:-3px;
    bottom:6px;
    height:80px;
}
</style>
<![endif]-->
<style type="text/css">
/* navigation with equal spread - Erik J's method */
.nav {
    margin:auto;
    border:3px outset #66f;
    padding:0;
    min-width:40em;
    width:98%;
    height:44px;
    overflow:hidden;
    background:#039;
    text-align:justify;
    font-size:93%;
}
.nav li {
    display:inline;
    list-style:none;
}
.nav li.last {
    margin-right:100%;
}
.nav li a, .nav li span {
    display:inline-block;
    padding:13px 1px 0;
    height:31px;
    color:#ddd;
    vertical-align:middle;
    text-decoration:none;
    text-transform:capitalize;
}
.nav li a:hover {
    margin:-3px;
    border:3px inset #66f;
    color:#ff6;
    background:#36c;
}
</style>

</head>
<body>

<div id="wrap">
    <div id="left">
        <p>left content</p>
    </div>

    <div id="right">
        <p>right content</p>
    </div>
    <div id="middle">
        <div class="a">
            <div class="d">
                <div class="content">
                    <p id="clickme">Click to view the overlay</p>                    
                    <p>Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli enim tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. In at Maecenas porttitor dui libero vel eros et quis condimentum. Et tempor ac vitae ut Vestibulum fa</p>
                    <p>Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli enim tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. In at Maecenas porttitor dui libero vel eros et quis condimentum. Et tempor ac vitae ut Vestibulum fa</p>
                    <p>Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli enim tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. In at Maecenas porttitor dui libero vel eros et quis condimentum. Et tempor ac vitae ut Vestibulum fa</p>
                    <div class="c"><span></span><b></b><i></i></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="overlay">
    <div id="opaque"></div>
    <div id="box">
        <p>Welcome!<br> to our overlay and sliding message box!</p>
        <p id="close">Close X</p>
    </div>
</div>

</body>
</html>

Thanks for all your help guys!
I unfortunately have to go afk so i dont have a chance to read any more past post 2 sorry :frowning:

But when i comeback i will dedicate myself to reading the posts.

Thanks death-shadow and rayzur , ill get back to you later tonight.

P.S. I have filled the page with content and the sliding in box. I have already developed a login form and tried that it works in it. I just removed all the content and put place-holders because i thought it would be easier to work with in regarding the overlay issue :slight_smile:

Regards,
Team 1504

It’s at the top of the page, there’s no reason to even be confusing him with the badly broken and unpredictable position:fixed when absolute will work just fine in ALL browsers… Since position:fixed causes render errors in legacy webkit AND Opera.

It’s why I prefer:

body {
width:100%;
height:100%;
overflow:hidden;
position:relative; /* opera bugfix */
}

.fixed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

#pageWrapper {
height:100%;
overflow:auto;
}

As long as your fixed element is outside #pageWrapper it will behave like position:fixed since we stripped scrolling off HTML/BODY, and it lacks the rendering bugs that position:fixed introduces across all browsers.

Oh and source-order wise I like to put my ‘fixed’ elements AFTER my pagewrapping div, that way I don’t have to dick with z-index.

Hi,

The main problem is that your overlay div is a block element in the normal page flow, that is why it is pushing everything else down.

What you need to do is remove it from the page flow with position:fixed; for good browsers and then feed IE6 position:absolute;

I am using fixed positioning for good browsers to keep the overlay div from scrolling up. IE6 does not support fixed positioning so it gets the next best thing.

Now I would set things up a little differently in the html, I would set the overlay div outside of the wrapper completely. You have some relative positioning going on inside the page too so that tripped the IE6/7 z-index bug and I made note of those fixes in the css. I wound up having to set position:relative; on the #wrap div so I could layer the entire page under the overlay div.

I also reworked the opacity method, I set the opacity on an inner div in the overlay div which is named #opaque. That keeps the opacity from being inherited to your message box and keeps the BG color and text normal.

I got rid of the transitional doctype and gave it HTML 4.01 Strict. I also got rid of the empty float clearing div in the html and used overflow on the #wrap for float containment.

You should be able to follow the html and my comments in the css.
Hope that helps :slight_smile:

[COLOR=Blue]html,body {height:100%}/*reference height for overlay*/[/COLOR]

body {
    background:#fffccc;
}
p {
    margin:0 0 1em
}
h1 {
    text-align:center;
    margin:0 0 20px;
}

/*=== Begin Overlay Styles ===*/
[B]#overlay, #opaque[/B] {
[COLOR=Blue]    position:fixed;
    z-index:2;/* manually set stacking order for IE6/7 */[/COLOR]
    [COLOR=Blue]top:0;left:0;[/COLOR]
    width:100%;
    height:100%;
}
[COLOR=Red]* html #overlay, * html #opaque {
    position:absolute; [B]/*IE6 does not suport fixed positioning*/[/B]
}[/COLOR]
    [B]#opaque[/B] {
        [COLOR=Blue]opacity:0.65;
        -ms-filter:"alpha(opacity=65)"; /* IE8 */
        filter:alpha(opacity=65); /* IE6/7 */
        background:#000;[/COLOR]
       [COLOR=Blue] z-index:1;/* layer #opaque below #box */[/COLOR]
    }
    [B]#box[/B] {
        width:420px;
        height:214px;
        margin:0 auto;
        [COLOR=Blue]position:relative;
        top:30px; z-index:2;[/COLOR]
        background:#fff;
        border:1px solid #000;
    }
    #box p {margin:1em; font-weight:bold}

/*=== Begin Page Layout ===*/    
[B]#wrap[/B] {
    [COLOR=Blue]position:relative; z-index:1; /* manually set stacking order for IE6/7 */[/COLOR]
    min-width:800px;
    max-width:1500px;
    margin:auto;
    [COLOR=Blue]overflow:hidden;/*contain floats*/
[/COLOR]}

Complete Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Transparent Shadow all around with one image - (Not IE6)</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="assets/scripts/js/shortcuts.js"  charset="utf-8"></script>

<script type="text/javascript">
$(document).ready(function() {
  $('#overlay').hide();
   $('#box').hide();
});
</script>

<script type="text/javascript">
$(function () {
    $('#clickme').click(function() {
      $('#overlay').fadeIn("fast");
      $('#box').slideDown("slow");
    });
});

</script>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
html,body {height:100%}/*reference height for overlay*/

body {
    background:#fffccc;
}
p {
    margin:0 0 1em
}
h1 {
    text-align:center;
    margin:0 0 20px;
}

/*=== Begin Overlay Styles ===*/
#overlay, #opaque {
    position:fixed;
    z-index:2;/* manually set stacking order for IE6/7 */
    top:0;left:0;
    width:100%;
    height:100%;
}
* html #overlay, * html #opaque {
    position:absolute; /*IE6 does not suport fixed positioning*/
}
    #opaque {
        opacity:0.65;
        -ms-filter:"alpha(opacity=65)"; /* IE8 */
        filter:alpha(opacity=65); /* IE6/7 */
        background:#000;
        z-index:1;/* layer #opaque below #box */
    }
    #box {
        width:420px;
        height:214px;
        margin:0 auto;
        position:relative;
        top:30px; z-index:2;
        background:#fff;
        border:1px solid #000;
    }
    #box p {margin:1em; font-weight:bold}

/*=== Begin Page Layout ===*/    
#wrap {
    position:relative; z-index:1; /* manually set stacking order for IE6/7 */
    min-width:800px;
    max-width:1500px;
    margin:auto;
    overflow:hidden;/*contain floats*/
}
#middle {
    min-height:0;
    overflow:hidden; /*prevent sliding under floated columns*/ 
    padding:0 30px 0 0;
}
.a, .d, .c b, .c span, .c i {
    position:relative;
    background: url(images/team-intro2.png) no-repeat;
    width:100%;
}
.a {
    margin:15px auto 40px;
    clear:both;
    min-width:300px;
    width:auto;
}
.d {
    background-position:100% 100%;
    position:relative;
    top:30px;
    left:30px;
}
.content {
    padding:20px;
    min-height:0;
    text-align:justify;
    position:relative;
    top:-11px;
    left:-11px;
    margin:0 8px 9px 0;
    min-height:410px;
}
.c {
    width:100%;
    position:absolute;
    left:0;
    top:0;
    right:0;
    height:100%;
}
.c span, .c b {
    width:32px;
    height:32px;
    background-position:100% 0;
}
.c span {
    float:right;
    margin:-21px -21px 0 0
}
.c b {
    position:absolute;
    left:-21px;
    bottom:-13px;
    background-position:0 100%;
    clear:both
}
.c i {
    position:absolute;
    left:-3px;
    bottom:15px;
    background-position:-18px 99%;
    height:80px;
    width:15px;
}
/* left and right columns */

#left, #right {
    float:left;
    width:210px;
    background:red;
    border:1px solid #000;
    min-height:450px;
    margin:30px 10px 0;
    display:inline;
}
#right {
    float:right;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
* html .content {zoom:1.0;padding:25px 45px 25px 25px}
* html .c, * html .c * {
    display:none;
}
* html #wrap,* html #middle{zoom:1.0;padding:0}
* html #middle{    margin:0 220px 0 220px;}
* html .a {background:#fff;border:1px solid #000;}
* html .d{background:none;}
.c b {
    left:-21px;
    bottom:-22px;
}
.c i {
    left:-3px;
    bottom:6px;
    height:80px;
}
</style>
<![endif]-->
<style type="text/css">
/* navigation with equal spread - Erik J's method */
.nav {
    margin:auto;
    border:3px outset #66f;
    padding:0;
    min-width:40em;
    width:98%;
    height:44px;
    overflow:hidden;
    background:#039;
    text-align:justify;
    font-size:93%;
}
.nav li {
    display:inline;
    list-style:none;
}
.nav li.last {
    margin-right:100%;
}
.nav li a, .nav li span {
    display:inline-block;
    padding:13px 1px 0;
    height:31px;
    color:#ddd;
    vertical-align:middle;
    text-decoration:none;
    text-transform:capitalize;
}
.nav li a:hover {
    margin:-3px;
    border:3px inset #66f;
    color:#ff6;
    background:#36c;
}
</style>

</head>
<body>

<div id="overlay">
    <div id="opaque"></div>
    <div id="box">
        <p>Welcome!<br> to our overlay and sliding message box!</p>
    </div>
</div>

<div id="wrap">
    <div id="left">
        <p>left content</p>
    </div>
    <div id="right">
        <p>right content</p>
    </div>
    <div id="middle">

        <div class="a">
            <div class="d">
                <p id="clickme">Click to view the overlay</p>
                <div class="content">
                    <p>Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli enim tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. In at Maecenas porttitor dui libero vel eros et quis condimentum. Et tempor ac vitae ut Vestibulum fa</p>
                    <p>Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli enim tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. In at Maecenas porttitor dui libero vel eros et quis condimentum. Et tempor ac vitae ut Vestibulum fa</p>
                    <p>Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli Lorem ipsum dolor sit amet consectetuer nibh elit a In ac. Orci et arcu orci convalli enim tellus ligula vestibulum hac. Risus felis nisl In at et in orci Curabitur mauris ipsum. In at Maecenas porttitor dui libero vel eros et quis condimentum. Et tempor ac vitae ut Vestibulum fa</p>
                    <div class="c"><span></span><b></b><i></i></div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>