1

写真を含むアニメーション フィルムストリップがありますが、z-index 値を調整してフィルムストリップを写真の上に浮かせることができません。スタック コンテキストを変更するために不透明度の値を変更することを提案する Philip Watson が説明した回避策を試しましたが、実装に問題があります。現在、位置を相対に設定していますが、z-index はまだ効果がありません。私のコードはここで見ることができます：

http://pastebin.com/NBdV4wsn

ここで実行されているフィルムストリップ：

http://www.streetpics.co.uk/testingground.html

この腹立たしい問題を助けてくれてありがとう。

4

1 に答える 1

0

スタッキング コンテキストは子のみに固有であるため、z-index は機能していません。親に使用する z-index がどれほど低くても、子は独自のスタック コンテキストにあるため、親の後ろに移動することはありません。

ただし、いつでも親コンテナに疑似要素を作成し (画像と同じスタック コンテキストにあるように)、画像の上に重ねることができます。

.film_strip:after {
    background-image: url([filmstrip.gif]);
    background-repeat: repeat-x;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

このため、何に対しても z-index を指定する必要がなくなります (イェイ!)。

疑似要素を強制的に親の全次元に拡張するための秘訣は、絶対に配置されている場合、上、左、下、右の座標を 0 に指定することです。

概念実証のフィドルは次のとおりです。http://jsfiddle.net/teddyrised/pNPm2/

于 2013-09-26T18:44:33.533 に答える