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;
}

将固定元件定位在浮动元件上

1 个答案: