...

View Full Version : Need an element to stack on top of everything else



surreal5335
07-12-2011, 07:50 AM
I am using the z-index and position:absolute/relative respectively. My problem is while I can the element to appear over one item solid, it is slightly transparent when overlapping other elements it is not the child of.

I am using an ul with a nested ul inside a li of the parent as so:



<ul class="showcase_menu">
<li id="showcase_menu_1"><a href="javascript:void(0);" >Children's</a>
<ul class="showcase_submenu" id="showcase_menu_1_submenu">
<li id="child_submenu_1"><div>Submenu_1</div>
</li>
<li id="child_submenu_2"><div>Submenu_2</div>
</li>
<li id="child_submenu_3"><div>Submenu_3</div>
</li>
</ul>
</li>
<li ><a href="javascript:void(0);" id="showcase_menu_2">Action</a></li>
<li ><a href="javascript:void(0);" id="showcase_menu_3">Horror</a></li>
</ul>


Here is some css for it:



.showcase_menu_container
{
float: left;
width: 20%;
margin: 20px 6% 20px 2%;
height: 300px;
position: relative;
z-index: 1;
}

.showcase_menu
{
position: relative;
z-index: -1;
width: 100%;
height: 300px;
margin: 0px 0px 0px 0px;
padding: 20px 0px;

}

.showcase_menu li {
display: block;
position: relative;
z-index: 1;
height: 70px;
margin: 20px 0px;
background: gray;
opacity:0.60;
filter:alpha(opacity=60);
}

.showcase_submenu
{
width: 225px;
margin: 10px;
left: 200px;
position: absolute;
z-index: 999;
border: solid;
background: #D9D8D8;
padding: 10px;
opacity:1.0;
filter:alpha(opacity=100);
}

.showcase_submenu li
{
display: block;
padding: 10px;
width: 88.5%;
margin: 2px;
float: right;
height: 50px;


border-width: 2px 2px 2px 2px;
border-style: solid;
border-color: #666;
background: gray;
}




I have another element outside of the ul which I also need to be layered underneath the ul which is nested in the main ul.

The nested ul will have full opacity when laying over the li it is nested within. This makes sense, but how can I make it full opacity when laying over the elements its not nested in?

surreal5335
07-13-2011, 06:06 AM
bumping up

Sammy12
07-13-2011, 06:11 AM
relative must be against relative.

Static vs Static = z-index work
Absolute vs Static = z-index work
Relative vs Static = z-index no work
Relative vs Absolute = z-index no work

I think... :)

From the script you provided, take the "relative" out of the li's. Try changing the .showcase_submenu to relative, or add another div that is absolute --> relative



<div class="showcase_submenu">
<div class="relative w/z-index">

</div>
</div>

vikram1vicky
07-13-2011, 10:46 AM
Share the mockup of layout u want...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum