CODEWITHSUNDEEP
z-indexnested-lists
odile
odile

Reputation: 51

css z-index between nested elements?

I need to get a nested element displayed partially behind its parent element, but so far it doesn't work.

The parent element is positioned 'relative' and has a z-index of 100; the nested element has a z-index of 50 and is positioned 'absolute', as in the following example:

    <ul class="parent-element">
        <li> some text </li>
        <li> some text </li>
        <li> some text 
                <ul class="nested-element">
                    <li> some text </li>
                    <li> some text </li>
                    <li> some text </li>
                </ul>
   </li>
 </ul>

    <style type="text/css">
    .parent-element {
      position: relative;
      z-index: 1000000000000000000000000;
    {

    .nested-element {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1;
    {
</style>

See, no matter what z-index I give them the nested element remains on top. It suggests to me that you can't change the stack order between parent-child elements, yet it would be a very good solution here, as I need the nested list to partially slide under the parent list. What should I do?

Upvotes: 0

Views: 926

Answers (1)

peterjb
peterjb

Reputation: 819

I believe you are correct that you cannot change the stacking order between a parent and its children. I've used the clip property in the past to simulate a sub-list sliding under its parent by clipping away the part of the child that overlaps with (is 'under') the parent.

EDIT Here's an example of how I've used clip in the past to achieve the effect, but I'm not sure if this is what you are looking for: http://jsfiddle.net/q4170f3o/3/

(Sorry my original example had a fixed height in there for no reason.)

Basically what it's doing is setting the right edge of the child to the right edge of the parent and clipping it to zero width but at the right edge of the child. Then on hover, you transition the left clip boundary all the way to the left while moving the right edge of the child to the right an amount equal to the width of the child. Unfortunately I can't think of how this would work without setting a width on the child, but I haven't found that to be an issue in practice when I've used this in navigation scenarios. Hope this helps!

Upvotes: 1

Related Questions