css - 将固定元素定位在浮动元素上

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

您需要为您的textdiv提供位置z-index才能生效。只需添加：

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