0

サイドバーの下の三角形のz-indexを正しく機能させるのに問題があります。3D効果を確認できるように、ヘッダーボックスの下に配置する必要があります。アイデアはありますか？

サイトは-http：//www.dunkleysdairy.com

サイドバーは右側にあります（黄色の見出し付き）

4

2 に答える 2

1

発生している問題は、要素のz-indexを、ネストされている要素よりも低く設定しようとしていることです。これは不可能です。グラフィカルな例については、リンクを参照してください： https ://developer.mozilla.org/ en-US / docs / CSS / Understanding_z-index / The_stacking_context

後方に移動したい要素が、前方に移動する予定のアイテムの子の子孫ではないことを確認する必要があります。

特定のケースでは、.headingのスタイリングをh2に適用することで、これを修正できます。

または、これに疑似要素を使用することを検討して、余分なdivを追加する必要がないようにすることもできます。あなたのhtmlは次のようになります：

<div class="heading">Title goes here</div>

次に、このルールを使用して現在の.headingスタイルに追加します（.headingにrelative：positioningを維持し、そこからz-indexを削除するようにしてください）。

.heading:before{
content:" "; display:block; position:absolute;
border-color: transparent #dfb704 transparent transparent; border-style: solid; border-width: 15px;
height: 0px; width: 0px; 
left: -15px; bottom: -15px;
z-index: -1;
}

これにより、三角形がz-indexスタックの見出しのすぐ下に設定されます。簡単な例を次に示します：http： //codepen.io/chrisboon27/pen/Fprxk

于 2013-03-15T20:52:45.420 に答える
0

frameはの子孫であるheadingため、のz-indexプロパティがframe影響します。それらに異なるz深度を提供する場合は、DOMツリーの異なるブランチに配置する必要があります。例：両方をの子要素にすることができますblock。

于 2013-03-15T20:36:03.250 に答える