3

下向き矢印の付いたメッセージボックスを作成しようとしています。余分なHTMLを避けるために、矢印に：after疑似要素を使用したいと思います。また、疑似要素にその親のボックスシャドウを継承させたいと思います。

私の試み： http： //goo.gl/LDs7N

その疑似要素を親の後ろに置くことができません。私がどこで間違っているのか理解できる人はいますか？

ありがとう！

4

6 に答える 6

5

z-indexに使用-1pxしましたが、z-indexはピクセル単位ではなく、数値だけで測定され、-1意図したとおりに機能します。

于 2012-11-16T13:48:24.220 に答える
3

z-indexはauto、整数またはinherit。だから使用する

z-index: -1;

それ以外の

z-index: -1px;

説明

z-indexレンダリングツリーがペイントされる順序で要素のランクを決定します。そのため、サイズ値（px、、、ptなどem）z-indexではなく、連続値（0.1em、0.09em 、、0.099em...）を提供せず、整数として指定される離散値のみを提供します。

レンダリングツリーがキャンバスにペイントされる順序は、スタッキングコンテキストの観点から説明されています。スタッキングコンテキストには、さらにスタッキングコンテキストを含めることができます。スタッキングコンテキストは、その親スタッキングコンテキストの観点からはアトミックです。他のスタッキングコンテキストのボックスは、そのボックスのいずれにも挟まれない場合があります。

于 2012-11-16T13:48:23.613 に答える
1

z-indexはに設定されてz-index: -1px;いますが、そうする必要がz-index: -1;あり、それで修正されました。

http://jsfiddle.net/Ch78n/7/

于 2012-11-16T13:48:15.127 に答える
1

交換

z-index: -1px;

と

z-index: -1;

あなたのフィドルを見てください

于 2012-11-16T13:48:31.820 に答える
1

透明度を使用して、境界線を使用して三角形を作成できます。正方形になるため、影は含まれません。このソリューションでは CSS3 の使用が少ないため、ブラウザとの互換性が高くなります。

フィドル: http://jsfiddle.net/Ch78n/9/

コード：

div:after {                        
    content: '';
    box-shadow: none;
    position: absolute;
    left: 80px;
    top: 30px;

    border-color: #EC5F54 transparent transparent; 
    border-style: solid; 
    border-width: 10px 10px 0; 
    width: 0;
    height: 0;
}
于 2012-11-16T13:53:22.930 に答える
1

z-index はピクセル単位で測定されないため、に変更z-index: -1px;します。z-index: -1;JSFiddle: http://jsfiddle.net/Ch78n/8/

于 2012-11-16T13:49:44.040 に答える