473,325 Members | 2,860 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

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 42500
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Stephen Weatherly | last post by:
Could anyone please help me with a problem I am having with my table widths??? If I have 2 images within a td tag, but using CSS relative positioning I position one over the top of the second (I...
0
by: miked | last post by:
Hi, I'm using relative positioning, and trying to shift the position of two gifs used to link to other pages on my site. The end result is fine in IE and Opera (the link gifs move to the...
1
by: David Dorward | last post by:
I'm trying to come up with a list of uses for relative positioning. Can anybody think of any I've missed? * Establishing a local positioning context on an element for the benefit of its...
1
by: Wilhelm Kutting | last post by:
Hi i like to make a complex layout with css. All the content is inside a container div. I like to get the following sequence without the css-layout: logo title mainnav content i can only...
17
by: George Hester | last post by:
http://tinyurl.com/5uj6w The lower middle icon the "block" should not drop down when the mouse is over it. How can I stop that? Also the navigation divs both top and bottom should follow the...
2
by: abhishek11 | last post by:
Hi all i have two image tags and when i try to render them using dive tag, lot of space remains between two images. To position them correctly , i used relative positiong for the second div tag....
3
by: mikewse | last post by:
I have a strange problem where it seems IE is doing the correct layout but Firefox and Safari isn't. I think I'm probably wrong, and there is something in the standards that say behaviour should be...
3
by: LayneMitch | last post by:
Hello everyone. I'm designing a site for a friend of mine and I'm having a few issues. First off, I'm noticing that there is a difference between the default line- heights of IE and...
1
by: redsasquatch | last post by:
I am working on a site where I've used relative positioning to place some pictures and frame boxes. However with relative spacing there is the reserve space where the object would naturally appear. ...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.