在浮動元素上定位固定元素

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格爲z-index生效。只需加上：

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