I have a z-index issue (this is for a site in development, so I've only tested
in Chrome -- I'm guessing it's the same everywhere, and that the problem is
me).
i don't have a public server, so I've cut the code down to a minimum, and
pasted it at the bottom.
As you can see, the green #header has a z-index of 2, while the ol containing
the Items has a z-index of 0.
I think that the Items should be beneath both the category text, and the green
block (ie not currently visible). however, they are, in fact on top of
everything.
Why? And how do I fix it?
(I'm pretty sure I've run into this before, and perhaps even asked the list,
but I was unable to find anything in the archives, so if this is a repost, i
apologize in advance).
---Tim
Code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
ol {
list-style: none;
padding: 0;
}
#header {
height: 300px;
background-color: green;
z-index: 2;
position: relative;
}
.nav {
color: red;
font: bold 2em sans-serif;
position: absolute;
bottom: 0;
width: 100%;
}
.nav li {
position: relative;
}
.parent ol {
position: absolute;
top: -100%;
left: 0;
color: blue;
z-index: 0;
}
</style>
</head>
<body>
<div id="header">
<ol class="nav">
<li class="parent">
Category 1
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ol>
</div>
</body>
</html>
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
