4

There are two containers. One is fixed and covers 100% of the screen. Second is relative - contains scrollable content. The problem is that there are four elements to be positioned relative to each other as follows: 1st in a fixed container, 2nd in absolute, 3rd fixed, 4th in absolute.

<div class="container fixed">
    <div class="el z1"></div>
    <div class="el z3"></div>
</div>
<div class="container relative">
    <div class="el z2"></div>
    <div class="el z4"></div>
</div>

However, z-index of one of the parents will always be less than the other, which not allow to do order for 4 children elements.

There is fiddle http://jsfiddle.net/only_dimon/zkY4C/6/ I want order: yellow, green, white, black from bottom. But as you can see - yellow, white, green, black.

The result I want:
enter image description here

But elements should be in different containers.

Thanks in advance!

This helps for me: For many elements helps only html reconstruction. Luckily I don't need to use fixed container for fixed elements, because fixed element's position and sizes depends on window size, even if I put them into relative container.

only_dimon
  • 79
  • 2
  • 11
  • It's working just great for me, what browser are you using I'm using firefox btw. – Breezer Apr 19 '13 at 10:01
  • Thanks for showing the truth. I didn't expect such behavior from chrome (the last version 26.0.1410.64 m). Is anybody knows how to fix such problem in webkit? – only_dimon Apr 19 '13 at 10:14

2 Answers2

3

After some further investigation, child element can't/aren't suppose to be able to overrule the parent z-index, some browser for example Firefox though ignores parent index for some reason and displays your elements are you wish but every other browser I've tried (Opera,Safari,Chrome) does not, so no it's not possible to accomplish what you want without changing the mark-up of your HTML for cross-browser compatibility.

Edit:

You can even find quite some posts in the subject.

How can I get a child of an element with lower z-index on front of a child of another element with higher z-index?

How to get a parent element to appear above child

can I override z-index inheritance from parent element?

Edit - 2:

Depending on what you want to accomplish there is many alternative way you could get a fake "zindex" behaviour, one thing worth looking at is pointer-events:none; together with a transparent background you'd never know it's above the other element.

If it's for the background, you could use box-shadows with diffrent settings to fake it.

can't come up with any other reason atm but if you tell me i'll try to give you a solution for it aswell.

Regards

Community
  • 1
  • 1
Breezer
  • 10,410
  • 6
  • 29
  • 50
  • Thanks for explanaition. Bad. I will look for solution in different ways. – only_dimon Apr 19 '13 at 10:21
  • @only_dimon updated answer with solutions that may be alternative on what you want to accomplish – Breezer Apr 19 '13 at 10:25
  • Yes. It is for two types of background. The fixed and relative blocks can contains div with background-image, images (gradients, patterns and subject images). And relative contains wrapper with the site content, which should be atop everytime. – only_dimon Apr 19 '13 at 10:38
  • pointer-events hack unfortunately can't help with many objects. I try to find acceptable html-changing solution for my project – only_dimon Apr 19 '13 at 10:46
  • @only_dimon sorry none of them were to your help, maybe as a last resort you could try masking, but it would be alot of work for little, I don't recommend it. But either way please mark this question as answered so that other people that have similar issues can find some help here =) – Breezer Apr 19 '13 at 10:58
  • Alright:) I think your advices will be the great help for others. – only_dimon Apr 19 '13 at 11:06
  • @only_dimon Thanks alot, sorry there wasn't much more that could be done – Breezer Apr 19 '13 at 11:08
  • Thanks for pointing out "pointer-events: none;". It solved my problem. – Thomas - BeeDesk Apr 03 '15 at 20:19
0

Like this: http://jsfiddle.net/9Hh89/1/ ?

Here is my HTML:

<div class="fixed">
    <div class="yellow">
        <div class="green">
            <div class="white">
                <div class="black"></div>
            </div>            
        </div>        
    </div>
</div>

and the CSS:

html, body { height:100% }

body { padding:0 ;
    margin:0 ;
}

.fixed { height:100% ;
    min-height:100% !important ;
    background:#666666 ;
    position:relative ;
    z-index:1 ;
}

.yellow, .green, .white, .black {
    display:block ;
    margin:auto !important ;
    position:absolute ;
    top:0 ;
    bottom: 0 ;
    right: 0 ;
    left: 0 ;
}

.yellow { width:220px ;
    height:220px ;
    background:yellow ;
    z-index:100 ;
}

.green { width:170px ;
    height:170px ;
    z-index:200 ;
    background:green ;
}

.white { width:100px ;
    height:100px ;
    z-index:200 ;
    background:white ;
}

.black { width:50px ;
    height:50px ;
    z-index:300 ;
    background:black ;
}

Best,

Cynthia

Cynthia
  • 5,273
  • 13
  • 42
  • 71