0

浮動要素の上に固定要素を配置しようとしています。そのために、プロパティを使用してい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>
4

1 に答える 1

1

text有効にするには、 div に位置を与える必要がありますz-index。追加するだけです：

.text{
    display:inline;
    z-index:999; /* HIGHER THAN .floating Z-INDEX*/
    position: relative;
}
于 2013-05-20T12:14:54.173 に答える