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>
