css - 将固定元素定位在 float 元素之上

Question

我正在尝试将固定元素定位在 float 元素之上。为此，我正在使用 z-index 属性，但它似乎不适用于固定元素。

在这个例子中，我试图将单词 text 放置在白色 float 框上。 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;
}