homepage Welcome to WebmasterWorld Guest from 54.166.255.168
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
greencode

5+ Year Member



 
Msg#: 4605734 posted 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>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.

 

brandozz



 
Msg#: 4605734 posted 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?

greencode

5+ Year Member



 
Msg#: 4605734 posted 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;
}

brandozz



 
Msg#: 4605734 posted 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?

greencode

5+ Year Member



 
Msg#: 4605734 posted 12:37 pm on Aug 29, 2013 (gmt 0)

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]

DrDoc

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



 
Msg#: 4605734 posted 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.
Paul_o_b

10+ Year Member



 
Msg#: 4605734 posted 8:47 pm on Aug 31, 2013 (gmt 0)

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.

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