Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    Need an element to stack on top of everything else

    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:

    Code:
    <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:

    Code:
    .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?

  • #2
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    bumping up

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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

    Code:
    <div class="showcase_submenu">
     <div class="relative w/z-index">
    
     </div>
    </div>
    Last edited by Sammy12; 07-13-2011 at 07:14 AM.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Share the mockup of layout u want...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •