468,107 Members | 1,314 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,107 developers. It's quick & easy.

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
Jul 20 '05 #1
8 42191
as*******@hotmail.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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2
On Fri, 09 Jul 2004 17:04:14 +0100, Steve Pugh <st***@pugh.net> wrote:
as*******@hotmail.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.
Jul 20 '05 #3
Neal <ne*****@yahoo.com> wrote:
On Fri, 09 Jul 2004 17:04:14 +0100, Steve Pugh <st***@pugh.net> wrote:
as*******@hotmail.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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #4
Steve Pugh wrote:
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.


I use negative z-index on my site. How else to get elements to slide
behind static blocks, whose z-index is 0 by default?

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #5
> 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
Jul 20 '05 #6
as*******@hotmail.com (Asad) wrote:
Steve Pugh <st***@pugh.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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #7
Asad wrote:
(Kindly start another thread on possible z-index values; that is not
the purpose of this thread and the subject is misleading.


According to you, perhaps. But I see "z-index" in the subject. Seems
like possible values for z-index are quite appropriate.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #8
Coming back to my original problem, I did try that parent div tag with
relative positioning, but doesn't seem to work. Here is my code:

------------------------------------------------

<html>

<head>
<title>Foo</title>
<script>
function showLayer (layerName) {
if (document.getElementById) {

var targetElement = document.getElementById(layerName);
targetElement.style.display = 'block';
//alert (targetElement.style)
//alert (targetElement.style.zIndex)
}
}

function hideLayer(layerName) {
if (document.getElementById)
{
var targetElement = document.getElementById(layerName);
targetElement.style.display = 'none';
}
}
</script>
<link rel="stylesheet" type="text/css" href="ws-style.css">

</head>

<body topmargin="5" leftmargin="0">
<table align="center" border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="750"
id="AutoNumber1" height="80">
<tr>
<td width="100%" align="center" background="banner1.jpg"
STYLE="background-repeat: no-repeat;" >&nbsp;</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="750"
id="AutoNumber2">
<tr>
<a class="links" href="home.asp"><td width="20%" class="links"
onmouseover="this.className='linkson'"
onmouseout="this.className='links'">home</td></a>
<a class="links" href="solutions.asp"><td width="20%" class="links"
onmouseover="this.className='linkson';showLayer('i dsublinks')"
onmouseout="this.className='links';hideLayer('idsu blinks')">solutions</td></a>
<a class="links" href="partner.asp"><td width="20%" class="links"
onmouseover="this.className='linkson'"
onmouseout="this.className='links'">partnerships</td></a>
<a class="links" href="contact.asp"><td width="20%" class="links"
onmouseover="this.className='linkson'"
onmouseout="this.className='links'">contact</td></a>
<a class="links" href="about.asp"><td width="20%" class="links"
onmouseover="this.className='linkson'"
onmouseout="this.className='links'">about us</td></a>
</tr>
</table>
<div class="sublinksdivparent">
<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>
</div>
<div class="base">
<table align="center" border="0" cellpadding="5" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="750"
id="AutoNumber3">
<tr>
<td width="70%" valign="top">
<p>In a traditional organization these days, access, flow and
availability
of information often routes through and involves too many steps.
<ul>
<li>.</li>
</ul>
</td>
<td width="30%" valign="top">
<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="100%"
id="AutoNumber4">
<tr>
<td width="100%" class="news">
<strong>Solutions</strong>
<p>
<div class="date">blah blah blah</div>

</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center" height="30"></td>
</tr>
</table>
</div>
<p></p>
</body>

</html>

-------------------------------------------------------------------

p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid; border-width: 2px}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}

a:link {color: #6C72BD; text-decoration: none}
a:visited {color: #6C72BD; text-decoration: none}
a:active {color: #6C72BD; text-decoration: none}
a:hover {color: #6C72BD; text-decoration: none}

a.links:link {color: #000000; text-decoration: none}
a.links:visited {color: #000000; text-decoration: none}
a.links:active {color: #000000; text-decoration: none}
a.links:hover {color: #FFFFFF; text-decoration: none}
td {
padding: 15px;
font-size: 12px;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #333;
/*font: 10pt verdana, arial;*/
}

td.survey {
padding: 5px;
font-size: 10px;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #333;
/*font: 10pt verdana, arial;*/
}

td.links {
cursor:pointer;
border-style: solid;
border-width: 1px;
font: 10px verdana;
text-align: center;
padding: 0px
}
td.linkson {
cursor:pointer;
border-style: solid;
border-width: 1px;
font: 10px verdana;
text-align: center;
padding: 0px;
color: #FFFFFF;
background: #FF6600;
}
div.sublinks {
cursor:pointer;
border-style: solid;
border-width: 0px;
font: 10px verdana;
text-align: center;
padding: 5px;
}
td.sublinks {
filter:alpha(opacity=90); -moz-opacity:90%;
cursor:pointer;
border-style: solid;
border-width: 0px;
font: 10px verdana;
text-align: center;
padding: 5px;
background: #FF6600;
}
td.sublinkson {
cursor:pointer;
border-style: solid;
border-width: 0px;
font: 10px verdana;
text-align: center;
padding: 5px;
color: #000000;
}
td.sublinkhilite {
filter:alpha(opacity=90); -moz-opacity:90%;
cursor:pointer;
border-style: solid;
border-width: 0px;
font: 10px verdana;
text-align: center;
padding: 5px;
color: #FFFFFF;
background: #6C72BD;
}

div.sublinkhilite {
cursor:pointer;
border-style: solid;
border-width: 0px;
font: 10px verdana;
text-align: center;
padding: 5px;
color: #FFFFFF;
background: #FF6600;
}
div.sublinksdivparent {
position:relative;
margin:0 auto 0 auto;
}
div.sublinksdiv {
z-index:50;
position:absolute;
display: none;
}

body {
font: 10pt verdana;
}

p {
font-size: 12px;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #333;
}

td.news {
color: rgb(100,100,100);
padding: 15px;
background-image:url('images/dogear4.jpg');
background-repeat: no-repeat;
background-position: right top;
background-color: rgb(230,230,230); font-style:normal;
font-variant:normal; font-weight:normal; font-size:8pt;
font-family:verdana
}

..rightalign {
text-align: right;
}

div.date {
font: 8pt verdana;
color: #FF6600;
}
td.footer{
border-style: solid;
border-top-width: 1px;
border-bottom-width: 0px;
border-right-style: dotted;
border-right-width: 1px;
border-left-width: 0px;
border-color: rgb(200,200,200);
font: 10px verdana;
color: rgb(150,150,150);
padding: 10px;
}

--------------------------------------------------------------------
Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Stephen Weatherly | last post: by
1 post views Thread by David Dorward | last post: by
17 posts views Thread by George Hester | last post: by
3 posts views Thread by LayneMitch | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.