Z-Index not working with Relative Positioning

Hi,

I am basically trying to accomplish drop down menus for navigation on
a site. And I'm pretty much done except I am having one problem. The
z-index is not working with relative positioning!

Basically I have a page such as this:

http://members.rogers.com/asadkhan2/prob2.jpg

Now, see those home, solutions, etc. links? When a mouse rolls over
them, I want a drop down menu to appear; however, I want it to float
over the content, and not push the content downwards. (I blurred out
the content due to copyright issues). Initially I was using visibility
property; but then I found out that it leaves the white space attached
with the sublinks. So I opted for display property instead. Now here
is my CSS code (partial):

div.sublinksdiv {
z-index:+1;
margin-left:auto;
margin-right:auto;
position:relative;
display: none;
}

and here is how I am using it in my page:

<div id="idsublinks" class="sublinksdiv">
<table align="center" border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="750"
id="AutoNumber2">
<tr>
<td width="20%" ></td>
<td width="20%" class="sublinks"
onmouseover="this.className='sublinkhilite';showLa yer('idsublinks')"
onmouseout="this.className='sublinks';hideLayer('i dsublinks')">
<div class="sublinks" onmouseover="this.className='sublinkhilite'"
onmouseout="this.className='sublinks'">solution link 1</div>
<div class="sublinks" onmouseover="this.className='sublinkhilite'"
onmouseout="this.className='sublinks'">solution link 2</div>
<div class="sublinks" onmouseover="this.className='sublinkhilite'"
onmouseout="this.className='sublinks'">solution link 3</div>
<div class="sublinks" onmouseover="this.className='sublinkhilite'"
onmouseout="this.className='sublinks'">solution link 1</div>
<div class="sublinks" onmouseover="this.className='sublinkhilite'"
onmouseout="this.className='sublinks'">solution link 2</div>
<div class="sublinks" onmouseover="this.className='sublinkhilite'"
onmouseout="this.className='sublinks'">solution link 3</div>
</td>
<td width="20%" ></td>
<td width="20%" ></td>
<td width="20%" ></td>
</tr>
</table>
</div>

(Ignore the sublinkhilite stuff; its not the issue at hand. It only
gives a cool rollover effect when mouse moves over sublinks).

And here is my javascript code:

function showLayer (layerName) {
if (document.getElementById) {
var targetElement = document.getElementById(layerName);
targetElement.style.display = 'block';
}
}

function hideLayer(layerName) {
if (document.getElementById)
{
var targetElement = document.getElementById(layerName);
targetElement.style.display = 'none';
}
}

All this gives me the following result:

http://members.rogers.com/asadkhan2/prob1.jpg

As you can see, when a mouse rolls over the main links, the sublinks
do appear at appropriate location; however it pushes down the content!
When mouse rolls out, the content moves back up and picture looks like
prob2.jpg again.

Now this just looks ridiculous how the content moves around. Basically
the z-index property isn't functioning. Interestingly enough
"position: absolute" makes z-index work perfectly! However, then the
position gets all messed up with different sized windows as I am
centering everything. (There is no fixed left position for the submenu
to appear: its RELATIVE).

How can I fix this? Sorry about the lengthy description; but I just
wanted to make it clear for others and myself.

Thanks.

Asad

asadikhan (AT) hotmail (DOT) com (Asad) wrote:

I am basically trying to accomplish drop down menus for navigation on
a site. And I'm pretty much done except I am having one problem. The
z-index is not working with relative positioning!

div.sublinksdiv {
z-index:+1;

What nakes you think that +1 is a valid value for z-index?
http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index

http://members.rogers.com/asadkhan2/prob1.jpg

As you can see, when a mouse rolls over the main links, the sublinks
do appear at appropriate location; however it pushes down the content!

Of course it does. That's perfectly correct behaviour for position:
realtive; You've set position: realtive but not set any of top, left,
right or bottom. So that's effectively the same as setting position:
static; or not settong position at all. So when the display is set to
anything other than none the content appears in the page anda takes up
space in the page.

You need to use position: absolute; instead.

Now this just looks ridiculous how the content moves around. Basically
the z-index property isn't functioning.

The z-index, even if you gave it a sensible value, wouldn't help you
here as there's nothing in your page that occupies the same position
as the sublinks, so there's no stacking order to be controlled via
z-index.

Interestingly enough "position: absolute" makes z-index work perfectly!

Or more likely the default stacking order works as you want it to.

However, then the
position gets all messed up with different sized windows as I am
centering everything. (There is no fixed left position for the submenu
to appear: its RELATIVE).

So make a centered parent element with position: relative; and then
put the position: absolute; inside that so that it's positioned
relative (confusing...) to the parent div and not the page as a whole.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

On Fri, 09 Jul 2004 17:04:14 +0100, Steve Pugh <steve (AT) pugh (DOT) net> wrote:

asadikhan (AT) hotmail (DOT) com (Asad) wrote:

I am basically trying to accomplish drop down menus for navigation on
a site. And I'm pretty much done except I am having one problem. The
z-index is not working with relative positioning!

div.sublinksdiv {
z-index:+1;

What nakes you think that +1 is a valid value for z-index?
http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index

z-index accepts the value <integer>, and the definition at
http://www.w3.org/TR/CSS2/syndata.ht...ue-def-integer says:

"Some value types may have integer values (denoted by <integer>) ... An
<integer> consists of one or more digits "0" to "9" ... Both integers and
real numbers may be preceded by a "-" or "+" to indicate the sign.

Note that many properties that allow an integer or real number as a value
actually restrict the value to some range, often to a non-negative value."

There's nothing explicit there at
http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index which suggests that
using + or - would be incorrect for this property. Unless I'm missing
something.

Neal <neal413 (AT) yahoo (DOT) com> wrote:

On Fri, 09 Jul 2004 17:04:14 +0100, Steve Pugh <steve (AT) pugh (DOT) net> wrote:
asadikhan (AT) hotmail (DOT) com (Asad) wrote:

z-index:+1;

What makes you think that +1 is a valid value for z-index?
http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index

z-index accepts the value <integer>, and the definition at
http://www.w3.org/TR/CSS2/syndata.ht...ue-def-integer says:

"Some value types may have integer values (denoted by <integer>) ... An
integer> consists of one or more digits "0" to "9" ... Both integers and
real numbers may be preceded by a "-" or "+" to indicate the sign.

Note that many properties that allow an integer or real number as a value
actually restrict the value to some range, often to a non-negative value."

There's nothing explicit there at
http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index which suggests that
using + or - would be incorrect for this property. Unless I'm missing
something.

Well I never. I have a clear memory of negative z-index being an error
that browsers should ignore and hence that z-index should take an
unsigned integer as its value. But can I find where I got that memory
from? Nope.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

So make a centered parent element with position: relative; and then
put the position: absolute; inside that so that it's positioned
relative (confusing...) to the parent div and not the page as a whole.

Steve

Ok ... what? Can you give me an example?

(Kindly start another thread on possible z-index values; that is not
the purpose of this thread and the subject is misleading. Thanks.)

Asad

asadikhan (AT) hotmail (DOT) com (Asad) wrote:

Steve Pugh <steve (AT) pugh (DOT) net> wrote:

So make a centered parent element with position: relative; and then
put the position: absolute; inside that so that it's positioned
relative (confusing...) to the parent div and not the page as a whole.

Ok ... what? Can you give me an example?

<div class="parent">
<div class="child">hello</div>
</div>

..parent {position: relative; width: 200px; margin: 0 auto; height:
5em; background: red;}
..child {position: absolute; top: 2em; left: 2em; background: yellow;}

The parent div is centered within the width of the page and the child
div is absolutely positioned relative to the parent div, not to the
page.

(Kindly start another thread on possible z-index values; that is not
the purpose of this thread and the subject is misleading. Thanks.)

Actually, I'm changing the subject line of this sub-thread as this
part of the discussion has nothing at all to do with z-index. The
other sub-thread seems to be dead though as I acknowledge that I was
wrong and that you and Neal are right.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>