web-dev-qa-db-ja.com

Z-indexがdivに対して機能しないのはなぜですか？

フッターの背景の上にフッターを表示しようとしていますが、z-indexが機能していないようです。誰かがそれの何が悪いのかを知っていますか？ http://jsfiddle.net/f2ySC/

csspositioning
17
TruMan1

explicitlypositionプロパティを定義する必要があります：

.footerBox {
    background-color: #FFFFFF;
    border: 10px solid #DDDDDD;
    margin: 10px 0 -200px -10px;
    width: 1185px;
    z-index: 1000;

    position:relative;

}

http://jsfiddle.net/f2ySC/1/

これにより、フッターがcurrent stacking context：

...ルート要素はルートスタッキングコンテキストを形成します。他のスタッキングコンテキストは、「auto」以外の「z-index」の計算値を持つ任意の配置された要素（相対的に配置された要素を含む）によって生成されます。スタッキングコンテキストは必ずしも包含ブロックに関連しているわけではありません。 CSSの将来のレベルでは、他のプロパティがスタッキングコンテキストを導入する可能性があります。たとえば、「不透明度」...

http://www.w3.org/TR/CSS2/visuren.html#z-index

51
xandercoded

負のマージンを使用することは良い習慣ではありません。 z-index：-1;別のdivの背景にコンテンツを表示するだけです:)

5
Sel Fish

これはあなたが探している効果ですか？ 更新された例

追加した position: relative;から#footerBackおよび.footerBox 有効にする z-index

1
PatrikAkerstrand

FooterBoxでposition属性をabsoluteに設定します。新しいコードは次のようになります。

.footerBox {
    background-color: #FFFFFF;
    border: 10px solid #DDDDDD;
    margin: 10px 0 -200px -10px;
    width: 1185px;
    z-index: 1000;
    position: absolute;
}

デモを見る こちら

position: relativeを使用することもできます

0
jacktheripper