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

CSS Forum

    
Different z-index for nested list item
greencode




msg:4605736
 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:4605739
 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




msg:4605743
 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:4605750
 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




msg:4605751
 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




msg:4605821
 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




msg:4606468
 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