Welcome to WebmasterWorld Guest from 174.129.151.95

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>Block</li>
<li>Always Decline</li>
</ul>
</li>
</ul>

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

<snip>

[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
.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)

10+ Year Member



Hi,

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.