Forum Moderators: not2easy
#5 the red box, does and should be, appearing tucked behind #4.
#4 is clickable/hover through it's entire box, and #5 is only in a clickable/hover state where it's not being overlapped by #4.
Now, if viewed in Firefox/Moz #5 jumps in front of #4.
So basically, I need to keep #5 pushed behind all the other links whilst still keeping it in front of the parent ul/div.
Any clues as to what to do?
cheers,
-----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#primary-nav {
position:absolute;
z-index:1;
top:10px; left:10px;
width:785px; height:75px;
background-color:#ce982a;
}
#primary-nav ul {
z-index:2;
margin:30px auto 0px;
padding:0px 0px 0px 0px;
list-style:none; display:table;
white-space:nowrap;
}
#primary-nav li {
position:relative;
z-index:3;
display:table-cell;
margin:0px;
padding:0px 0px 0px 5px;
}
#primary-nav a {
position:relative;
z-index:5;
display:block;
color:#fff;
height:30px; }
#primary-nav a:hover { background-color:#fff!important; }
#primary-nav #nav1 { width:89px; background-color:#09f; }
#primary-nav #nav2 { width:106px; background-color:#09f; }
#primary-nav #nav3 { width:61px; background-color:#09f; }
#primary-nav #nav4 { width:89px; background-color:#09f; }
#primary-nav #nav5 {
z-index:4;
position:absolute;
top:-10px; right:40px;
width:200px; height:60px;
background-color:#c42;
}
</style>
</head>
<body>
<div id="primary-nav">
<ul>
<li><a id="nav1" href="#">Link 1</a></li>
<li><a id="nav2" href="#">Link 2</a></li>
<li><a id="nav3" href="#">Link 3</a></li>
<li><a id="nav4" href="#">Link 4</a></li>
<li><a id="nav5" href="#">Link 5</a></li>
</ul>
</div>
</body>
</html>
Here's a description of stacking behavior in general,
[w3.org...]
and some more in detail, which would probably make most people's mind explode (hence why many browsers aren't getting it right)
[w3.org...]
basicly from my understanding, if you have an element inside an element which are positioned, the inner one cannot have a higher or lower z-index than it's parent. When you have those anchor elements inside the list elements, the anchors aren't at the same level with each other, so they can't actually stack to what would seem to be a logical stacking order. In summary, z-index is not a global thing which assigns priority height to any element with the number assigned to it, but that it's relative, with stacking contexts. While this may make things more confusing and difficult, it makes it more flexible for cascading and such, what CSS is designed for.
#primary-nav li.last{z-index:2}
then a
class="last"
onto the last <li> in the list.
and Bingo, solved!
Xapti, you are right about the talk/pages about stacking contexts being a nightmare, and with a title of: Elaborate description of Stacking Contexts it doesn't bode well does it ;)
here's a (very brief) summary of the important points I take from the recs, as well as lessons learned along the way.. I don't know if it's right or if it's any clearer, but it helps me.
