473,699 Members | 2,321 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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:relati ve;
display: none;
}

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

<div id="idsublinks " class="sublinks div">
<table align="center" border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#1 11111" width="750"
id="AutoNumber2 ">
<tr>
<td width="20%" ></td>
<td width="20%" class="sublinks "
onmouseover="th is.className='s ublinkhilite';s howLayer('idsub links')"
onmouseout="thi s.className='su blinks';hideLay er('idsublinks' )">
<div class="sublinks " onmouseover="th is.className='s ublinkhilite'"
onmouseout="thi s.className='su blinks'">soluti on link 1</div>
<div class="sublinks " onmouseover="th is.className='s ublinkhilite'"
onmouseout="thi s.className='su blinks'">soluti on link 2</div>
<div class="sublinks " onmouseover="th is.className='s ublinkhilite'"
onmouseout="thi s.className='su blinks'">soluti on link 3</div>
<div class="sublinks " onmouseover="th is.className='s ublinkhilite'"
onmouseout="thi s.className='su blinks'">soluti on link 1</div>
<div class="sublinks " onmouseover="th is.className='s ublinkhilite'"
onmouseout="thi s.className='su blinks'">soluti on link 2</div>
<div class="sublinks " onmouseover="th is.className='s ublinkhilite'"
onmouseout="thi s.className='su blinks'">soluti on 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.getEl ementById) {
var targetElement = document.getEle mentById(layerN ame);
targetElement.s tyle.display = 'block';
}
}

function hideLayer(layer Name) {
if (document.getEl ementById)
{
var targetElement = document.getEle mentById(layerN ame);
targetElement.s tyle.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 42518
as*******@hotma il.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.sublinksdi v {
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*******@hotma il.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*******@hotma il.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*******@hotma il.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">h ello</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.getEl ementById) {

var targetElement = document.getEle mentById(layerN ame);
targetElement.s tyle.display = 'block';
//alert (targetElement. style)
//alert (targetElement. style.zIndex)
}
}

function hideLayer(layer Name) {
if (document.getEl ementById)
{
var targetElement = document.getEle mentById(layerN ame);
targetElement.s tyle.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="#1 11111" width="750"
id="AutoNumber1 " height="80">
<tr>
<td width="100%" align="center" background="ban ner1.jpg"
STYLE="backgrou nd-repeat: no-repeat;" >&nbsp;</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#1 11111" width="750"
id="AutoNumber2 ">
<tr>
<a class="links" href="home.asp" ><td width="20%" class="links"
onmouseover="th is.className='l inkson'"
onmouseout="thi s.className='li nks'">home</td></a>
<a class="links" href="solutions .asp"><td width="20%" class="links"
onmouseover="th is.className='l inkson';showLay er('idsublinks' )"
onmouseout="thi s.className='li nks';hideLayer( 'idsublinks')"> solutions</td></a>
<a class="links" href="partner.a sp"><td width="20%" class="links"
onmouseover="th is.className='l inkson'"
onmouseout="thi s.className='li nks'">partnersh ips</td></a>
<a class="links" href="contact.a sp"><td width="20%" class="links"
onmouseover="th is.className='l inkson'"
onmouseout="thi s.className='li nks'">contact</td></a>
<a class="links" href="about.asp "><td width="20%" class="links"
onmouseover="th is.className='l inkson'"
onmouseout="thi s.className='li nks'">about us</td></a>
</tr>
</table>
<div class="sublinks divparent">
<div id="idsublinks " class="sublinks div">
<table align="center" border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#1 11111" width="750"
id="AutoNumber2 ">
<tr>
<td width="20%" ></td>
<td width="20%" class="sublinks "
onmouseover="th is.className='s ublinkhilite';s howLayer('idsub links')"
onmouseout="thi s.className='su blinks';hideLay er('idsublinks' )">
<div class="sublinks " onmouseover="th is.className='s ublinkhilite'"
onmouseout="thi s.className='su blinks'">soluti on link 1</div>
<div class="sublinks " onmouseover="th is.className='s ublinkhilite'"
onmouseout="thi s.className='su blinks'">soluti on link 2</div>
<div class="sublinks " onmouseover="th is.className='s ublinkhilite'"
onmouseout="thi s.className='su blinks'">soluti on link 3</div>
<div class="sublinks " onmouseover="th is.className='s ublinkhilite'"
onmouseout="thi s.className='su blinks'">soluti on link 1</div>
<div class="sublinks " onmouseover="th is.className='s ublinkhilite'"
onmouseout="thi s.className='su blinks'">soluti on link 2</div>
<div class="sublinks " onmouseover="th is.className='s ublinkhilite'"
onmouseout="thi s.className='su blinks'">soluti on 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="#1 11111" 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="#1 11111" width="100%"
id="AutoNumber4 ">
<tr>
<td width="100%" class="news">
<strong>Solutio ns</strong>
<p>
<div class="date">bl ah 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(op acity=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.sublinkhilit e {
filter:alpha(op acity=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.sublinkhili te {
cursor:pointer;
border-style: solid;
border-width: 0px;
font: 10px verdana;
text-align: center;
padding: 5px;
color: #FFFFFF;
background: #FF6600;
}
div.sublinksdiv parent {
position:relati ve;
margin:0 auto 0 auto;
}
div.sublinksdiv {
z-index:50;
position:absolu te;
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('imag es/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
7746
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 am placing a transparent gif over the top of a normal gif) then the width of my table is large enough to accommodate both images side by side My browsers (both IE ad Firefox) do not appear take into account the relative positioning of my...
0
1689
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 required position), but doesn't seem to work in Netscape. The code I'm using is: A.1 {position: relative; left: 20px; top:25px} A.26 {position: relative; left: 10px; top:50px}
1
1719
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 absolutely positioned descendents. * Overlapping a nearby element (but why not just use negative margins?) * Cute, but probably useless, animations involving an element flying into and/or out of its normal position with JavaScript.
1
5362
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 get the results when i use negative positioning.
17
3045
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 scroll right. Both of these issues occur in IE 6 but not in IE 5.5. You can get the horizontal scroll bar for the window by increasing the size of the image wider than the display area of the window. Assumes 600x800 default display size. Thanks...
2
1518
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. But then next whatever i write starts from the position it would have startde without relative positioning. In a way then i need to relatively position all other elements which is not possible in my case as the same css has to be used for number of...
3
8974
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 like Firefox does, but could someone tell me what is right? In the below code I have element trees with three DIVs; the outer DIV establishes a positioning context and the "middle" DIV uses absolute positioning to put its top left corner in the...
3
3623
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 Mozilla/Firefox. I've tried different things like setting every line-height to zero 'px' by * {line-height: 0px;}, and it just messed things up even further as you will see if you click on the link below. Before the adjustments this morning, everything was...
1
3314
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. I am looking for help to find out how to collapse this reserved space as to not create a blank area on my web page.
0
8703
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
9185
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9050
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8935
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8893
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
5879
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4389
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4636
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2359
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.