Z-index doesn't work with positions

Question

I'm trying to create an popup, but I have problems with z-index and positions.

.filterBar is as follows :

.filterBar{
    position: fixed;
    z-index: 3;
    left: 275px;
    right: 15px;
    display: flex;
    align-items: center;
    height: 40px;
    background-color: #f9f9f9;
}

outter (it takes the whole body) is as follows :

#outter{
    z-index: 99999999;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background: rgba(22, 23, 23, 0.8);
}

With this styling I get next :

Thus, the filter bar is in front of outter div, no matters that outter has bigger z-index.

If I remove z-index: 3 from .filterBar class, then everything works nice.

But I can't remove z-index because I need it for the styling of the rest of the page.

Please post your html too or give a fiddle link with proper code. Thank you — Leo the lion, Dec 05 '16 at 11:36
check out this http://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning — onzinsky, Dec 05 '16 at 11:39

score 0 · Answer 1 · answered Dec 05 '16 at 11:41

0

That's happening because of display: flex elements. When you use flex items, they are displayed as inline-block elements.

[> 4.3. Flex Item Z-Ordering

Flex items paint exactly the same as inline blocks [CSS21], except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.][1]

You'll need to apply display: flex to body

answered Dec 05 '16 at 11:41

Jordi Flores

2,080
10
16

It doesn't work. I removed display: flex from my styles, but it still doesn't work. – Boky Dec 05 '16 at 12:16
try to make a jsfiddle with an example I'll try to help you. – Jordi Flores Dec 05 '16 at 14:22

Z-index doesn't work with positions

1 Answers1