2

相対的に配置された親要素の z-index を設定すると、疑似要素をその背後に配置できないという問題があります。

例: http://dabblet.com/gist/2948390

HTML:

<div class="img"><img src="http://lorempixel.com/500/344"></div>

CSS:

.img {
  background:#fff;
  z-index:10;
  position:relative;
  width:500px;
  height:344px;
  border:1px solid black;
  padding:10px;
}

.img:after {
  content:'';
  z-index:0;
  position:absolute;
  bottom:-5px;
  left:10px;
  width:50%;
  height:20%;
  -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
}

ここで、親要素から z-index を削除し、疑似要素の z-index を負に変更すると、機能することがわかります。

http://dabblet.com/gist/2948402

残念ながら、ページの残りの部分に配置されているため、その方法は使用できません。親要素に z-index を設定できる必要があります。

私の最初の例がそのように機能している理由は何ですか?

4

1 に答える 1

3

包含要素がスタッキング コンテキストを確立する場合、負の要素であってもz-index、常に包含要素の境界線/背景の前に配置されます。スタッキング コンテキストを形成しz-indexない値を持つすべてのアイテム:auto

'z-index'

    Value:   auto | <integer> | inherit
  Initial:   auto 
     [...]

値には次の意味があります。

<integer> この整数は、現在のスタック コンテキストで生成されたボックスのスタック レベルです。ボックスは、新しいスタッキング コンテキストも確立します。

auto 現在のスタック コンテキストで生成されたボックスのスタック レベルは 0 です。ルート要素でない限り、ボックスは新しいスタック コンテキストを確立しません。

[...]

各スタッキング コンテキスト内で、次のレイヤーが後ろから前に描画されます。

  1. スタッキング コンテキストを形成する要素の背景と境界線。
  2. 負のスタック レベルを持つ子スタック コンテキスト (最も負の値が最初)。
  3. [...]

そのため、2 番目のバージョンが機能.imgし、新しいスタック コンテキストが作成されません。

詳細については、CSS 2.1: 9.9.1 スタック レベルの指定: 'z-index' プロパティ) を参照してください。

解決

2 番目の疑似要素 を作成できることを忘れないでください.img:before。それを最大にスケーリングし、z-indexそれよりも高い負の値に設定し、.img:afterを追加しbackground-colorます。その上にレンダリングされるため、後ろに配置される.img:after効果が作成されます。.img:after.img

.img {
    background:#fff;
    z-index:10;
    position:relative;
    width:500px;
    height:344px;
    border:1px solid black;
    padding:10px;
}

.img:before{ /* create a pseudo-background */
    z-index:-1;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#fff;
    content: '';
}

.img:after {
    content:'';
    z-index:-2;  /* lower value than .img:before{z-index} */
    position:absolute;
    bottom:-5px;
    left:10px;
    width:50%;
    height:20%;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
}

ちょっとしたデモ

于 2012-06-18T13:56:15.557 に答える