Help Regarding Z-index

[raheelmushtaq]

Hi bro,
m new designer and new member @ this site, m in a problem, m tryng to bring the menu infront of the image i have on my web page, can u help me to solve the problem plz the code is
Here in this code i wd like to bring the menu infront of flashmovie and mobileprice

div
{

height:1024px;
background-color: #FFFFFF;
width:925px;
top:5px;
left:5px;
position:absolute;

}

#a
 {background-image:url(images/index_03.gif);
position:absolute;
top:25px;
left:10px;
height:82px;
width:472px}

#b
 {background-image:url(images/index_04.gif);
position:absolute;
top:25px;
left: 482px;
height:82px;
width:460px}
#login
{
top:3px;
left:425px;
position:absolute;
}
#password
{


top:3px;
left:595px;
position:absolute;
}
#submit{
top:3px;
left:782px;
position:absolute;

}

#register{
top:3px;
left:850px;
position:absolute;
font-size:16px;
}
#wrapper{
z-index:100;
}
#navmenu
{
margin:0;
padding:0;
top:107px;
left:20px;

}
#navmenu ul
{
margin:0;
padding:0;
line-height:30px;
}

#navmenu li
{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999999;
}
#navmenu ul li a
{

text-align:center;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
height:30px;
width:128px;
display:block;
color:#FFFFFF;
border:1px solid #000000;
}
#navmenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navmenu ul li:hover ul{
visibility:visible;
}

/*********************************************************/
#navmenu li:hover{
background:#0099FF;
}
#navmenu ul li:hover ul li a:hover{
background:#CCCCCC;
color:#000000;
}
.clearFloat{
clear:both;
margin:0;
padding:0;
}

#flashmovie{
	width:600px;
	height:200px;
	left:20px;
	top:139px;
	position:absolute;
	border:2px;
	color:#0000CC;
	background:#0000FF;
	z-index:2;
	
}
#mobileprice{
	width:310px;
	height:200px;
	left:620px;
	top:139px;
	position:absolute;
	border:2px;
	color:#0000CC;
	background:#00CC00;
	z-index:3;
	
}

thanks wd best regards

[Lusiphur]

Well, I have to say I've never seen z-index:100 used before...

Really not sure what you're working at there but just remember the higher the z-index the further forward it is from the back of the stack... higher = 'on top of' lower... as long as whatever you want to appear behind has a lower z-index than whatever you want to appear in front you've got it half way there.

That being said, if you have the other positioning incorrect, it doesn't matter at all what z-index the item is at if they aren't told to sit on the same spot :twisted:

Best of luck sorting it :)

[JJenZz]

If the issue is that you cannot bring something on top of a flash object, the solution is to add the following inside the flash <object>:

<param name="wmode" value="opaque"/>

This will allow elements to be positioned on top of the flash.

Try using the zindex to -1, you can individually set it in the div statment.