homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Different z-index for nested list item

 11:40 am on Aug 29, 2013 (gmt 0)

I have the following code

<ul class="actions">
<li class="settings">
<ul class="settings-menu">
<li>Always Decline</li>

Where I would like to add a z-index of 1 to .settings but a z-index of -1 to the .settings-menu.

Is that possible? I've tried but can't get it to work.



 12:07 pm on Aug 29, 2013 (gmt 0)

z-index only works on positioned elements, relative, absolute or fixed. Do you have that assigned to the classes.

Also, what exactly are you trying to accomplish with z-index?


 12:21 pm on Aug 29, 2013 (gmt 0)

I have the following. Basically if I don't put the .settings-menu 1 pixel under the .settings list item then the top border will show - whereas I don't want it to.

.imchat .icn.settings.open {
background-position: -12px -172px;
background-color: #fff;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-top: 1px solid #cecece;
border-left: 1px solid #cecece;
border-right: 1px solid #cecece;
position: relative;
z-index: 1;

.settings-menu {
display: none;
position: absolute;
width: 120px;
right: 0;
top: 12px;
font-weight: 400;
font-size: 13px;
border-top: 1px solid #cecece;
border-left: 1px solid #cecece;
border-right: 1px solid #cecece;
z-index: -1;


 12:32 pm on Aug 29, 2013 (gmt 0)

The top border for the .settings-menu? Couldn't you just remove "border-top: 1px solid #cecece;" from .settings-menu?


 12:37 pm on Aug 29, 2013 (gmt 0)

Unfortunately not. Here's the image


[edited by: DrDoc at 4:41 pm (utc) on Aug 29, 2013]
[edit reason] Please see forum charter [/edit]


 4:44 pm on Aug 29, 2013 (gmt 0)

I assume the [ * ] icon is a background applied to
.settings? Why not just place that as an image inside the outer <li> which is presently empty? Alternately, place some other content in that parent element and allow it to overlay.

 8:47 pm on Aug 31, 2013 (gmt 0)


You can't place a child element underneath the background of a positioned parent if the parent has a z-index other than auto (IE8+). If you give the positioned parent a z-index of auto (z-index:auto) then you will be able to place the child under the parents background by using z-index:-1 on the positioned child (ie7and under get this wrong though and won't obey).

Once you apply an actual number to the z-index of the parent (positive or negative) then it becomes "atomic" and the child can never escape and is always confined to be in front of the parents background.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved