17

position: relative相対的に配置された要素内に固定位置要素がありますが、要素が影響を与えてはならないという限りですposition: fixed(固定要素はウィンドウに対して相対的に配置されますよね?)。

ただし、固定要素の z-index は親によって継承されているようで、その z-index が親の z-index よりも高くなることはできません。

私は理にかなっていると思いますか？以下は、私が話していることの HTML の例です。

.outer { 
    position: relative; 
    z-index: 2; 
}
.inner { 
    background: #fff; 
    left: 50px; 
    position: fixed; 
    top: 40px; 
    z-index: 1000000; 
}

.fade { 
    background: #555; 
    bottom: 0; 
    left: 0; 
    opacity: 0.5; 
    position: fixed; 
    right: 0; 
    top: 0; 
    z-index: 3; 
}
<div class="outer">
    <div class="inner">testing testing</div>
</div>
<div class="fade"></div>

以下を変更した場合：

.outer { position: relative; z-index: 4; }

次に、.inner要素がフェード要素の前に表示されます。

この動作は非常に独特だと思います... div を移動したり、.innerdiv の CSS を変更したりせずにこれを回避する方法はあり.outerますか?

上記のコードサンプルのフィドル:

http://jsfiddle.net/n2Kq5/

http://jsfiddle.net/U8Jem/1/

4

1 に答える 1

28

要するに、はい、親の z-index が定義されている場合、要素position:fixedはその親の z-index によって制限さz-indexれます。

お知らせするのは悲しいことですが、あなたが望むことは現在不可能です. 希望する効果を得る唯一の方法は、HTML を変更するか、z-indexを から削除することouterです。

HTML オプションの変更

最初のオプションは、innerの外に移動することです。outerこれは次のようになります。

HTML 修正の 2 番目のオプションは、(同じ CSS を使用しても)fade内部に移動することです -そのデモはこちら.outer

3 番目のオプションは、 の中に入れてからfadeの中にouter入れることですが、これには rgba の色と不透明度を使用する必要があります。そのデモは here にあります。innerfade

CSS オプションの変更

現在使用しているのと同じ HTML を使用して得られる最も近い方法は、-Demo hereouterの z - index を削除することです。各要素の z-index を単純に 2 ずつ増やすことができると考えるかもしれませんが、子要素は親よりも高い z-index を持つことができないため (親の z-index が設定されている場合)、それは機能しません。

説明

考えてみればfade同outerレベル。あなたがやろうとしてfadeいるのは、同じレベルにとどまることですが、それより上のレベルにもあることです。これは不可能です。ビルの 2 フロアに同時に立ち入ろうとするようなもので、それは不可能です。

必要なものはこの記事とは直接関係ありませんが、Philip Walton がz-indexes and the effect opacity has on themに関する素晴らしい投稿を作成しました。これは、この質問を見ている他の人に役立つ可能性があります。

于 2013-11-07T18:21:13.900 に答える