Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Different z-index for nested list item



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

5+ Year Member

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)

5+ Year Member

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)

5+ Year Member

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)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I assume the [ * ] icon is a background applied to
? Why not just place that as an image inside the outer
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)

10+ Year Member


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.

Featured Threads

Hot Threads This Week

Hot Threads This Month