Позиционирование фиксированного элемента над плавающим

Question

Я пытаюсь позиционировать фиксированный элемент над плавающим. Для этого я использую свойство z-index, но, похоже, он не работает с фиксированными элементами.

В этом примере я пытаюсь позиционировать слово text над белым плавающим полем. http://jsfiddle.net/imac/Pkrqw/1/

Можно ли сделать то, что я пытаюсь сделать?

Эти стили я применяю:

.footer{ 
    position:fixed; 
    bottom:0; 
    width:100%; 
    height:40px; 
    background:#ccc; 
    color:#000; 
} 

.floatingBox{ 
    position:absolute; 
    bottom:0; 
    width:480px; 
    height:80px; 
    background:#fff; 
    border:1px solid #000; 
    left:80px; 

    z-index:100; /* LOWER THAN .text Z-INDEX*/ 
} 
.text{ 
    display:inline; 
    z-index:999; /* HIGHER THAN .floatingBox Z-INDEX*/ 
} 

И это HTML для примера:

<div class="floatingBox"></div> 
<div class="footer"> This is just a demo <div class="text">text</div></div> 

Answer 1

Вы должны дать место для вашего text DIV для z-index вступили в силу , Просто добавьте:

.text{ 
    display:inline; 
    z-index:999; /* HIGHER THAN .floating Z-INDEX*/ 
    position: relative; 
}