1

#page_container基本的に、画像がページに重なっているように見えるように、サイトの後ろに重なったコーナーを配置しようとしています。

実例： http： //jsfiddle.net/xBwQp/15/

HTML：

<div id="page_container">
    <div id="banner_wrapper">
        <img id="banner_image" src="http://placehold.it/350x150" />
        <div class="triangle-l"></div>
        <div class="triangle-r"></div>        
    </div>
</div>

CSS：

#page_container {
    background: red;
    width: 400px;
    position: relative;
    z-index: 10;
}

#banner_wrapper {
  position: relative;
}

#banner_image {
  position: relative;
}

.triangle-l {
  border-color: transparent green transparent transparent;
  border-style: solid;
  border-width: 15px;
  height: 0px;
  width: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 5;
}

.triangle-r {
  border-color: transparent transparent transparent blue;
  border-style: solid;
  border-width: 15px;
  height: 0px;
  width: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 5;
}

三角形.triangle-lと.triangle-r、は明らかによりも低くz-index:5なって#page_container z-index:10いますが、それでも上に表示されていることがわかります#page_container。

設定することで希望の結果を得ることができましたが、.triangle-lこれはFF、Opera、およびWebkitでのみ機能します。IEはサポートされていません。.triangle-rz-index:-1

私はそれがスタッキングコンテキストに関係していると信じています。ただし、ブラウザ間の互換性を使用して目的の結果を達成する方法がわかりません。

4

1 に答える 1

3

あなたは絶対に正しいです-それはスタッキングコンテキストについてです。

要素にz-indexを配置するたびに、新しいコンテキストを作成します。三角形は#page_containerの子孫であるため、＃page_containerのスタッキングコンテキストに属し、どのz-index番号を選択しても三角形は、このコンテキスト内でのみ意味があり、このコンテナの後ろに後方に移動することはできません。

詳細はこちらをご覧ください：https ：//developer.mozilla.org/en/CSS/Understanding_z-index/The_stacking_context

考えられる解決策は次のとおりです。

  • 要素をhtml構造内のコンテナーから移動します（次に、cssを使用して必要な場所に要素を配置します）
  • コンテナからz-indexを削除し、三角形をz-index -1に設定して、ドキュメント自体の下に移動します。
于 2012-05-12T01:35:23.540 に答える