Search code examples
csscss-positionz-indexfixed

z-index fails when two elements have a fixed position

I have two fixed elements (a Chat Box and the Cookies Ad) that doesn't position properly even if i add a z-index

The Styles

Chat:

bottom: 0;
position: fixed !important;
right: 40px;
z-index: 9998;

Cookies: 

background: #000000 none repeat scroll 0 0;
bottom: 0;
box-shadow: 0 0 10px 0 #ffffff;
color: #fff;
font-family: arial;
font-size: 14px;
left: 0;
line-height: 1.3em;
opacity: 0.5;
position: fixed;
text-align: center;
width: 100%;
z-index: 9999;

For more details, you can find it on this page: http://www.backlabel.com/

The HTML is too long to past and copy there..

Solution

  • If you want the cookies div above the chat set the higher z-index to .footer-container div