0

私は要素、この場合はliを持っていて、それを相対的に配置し、そこから:after疑似要素を持っています。それは絶対に配置された "" コンテンツを持ち、位置と寸法とボックスの影を持っています。z-index を -1 に設定しましたが、問題は、ページの一番下の z-index 要素に戻ることです。1つ下がって、liのすぐ後ろになると思います。

私はこれに従っています：http://nicolasgallagher.com/css-drop-shadows-without-images/

何か案は？擬似の z-index を 1 に設定すると、li の前にジャンプします。代わりに、1 ストップだけ後ろに置きたいだけです。

4

1 に答える 1

2

要素の z-index は、必ずしも親ではなく、最も近いスタック コンテキストを基準にして要素を配置します。さらに、負の z-index 値を指定するかどうかに関係なく、スタッキング コンテキストの背後に要素をレンダリングすることはできません(明らかに FF2 を除く)。疑似要素を の背後に表示する場合liは、 の祖先である要素がliスタック コンテキストを作成する必要があります。

現在、要素は、次の条件のいずれかが true の場合にのみスタック コンテキストを作成します ( MDNから取得):

  • 要素はルート要素 (HTML) であり、
  • "auto" 以外の z-index 値で(絶対的または相対的に) 配置されている、
  • 不透明度の値が 1 未満です (不透明度については仕様を参照してください)。

お気づきかもしれませんが、 (「auto」以外の)z-indexコンテナのプロパティの値を明示的に指定すると、問題が解決します。liこれは、コンテナが独自のスタッキング コンテキストを作成し、最も近いスタッキング コンテキストであるすべての子孫が、コンテナに相対的なz-index値に従って配置されるためです。

于 2013-06-06T15:42:44.340 に答える