4

だから私はボックスシャドウの両方をいじっていましたが、最近このようなことをしましたが、完璧に機能しました。その後、明らかな理由もなく突然動作しなくなりました。

私がやろうとしているのは、折りたたみ効果のようなものを作るために、下に二重の影がある単純な div ボックスを用意することです。

jfiddle http://jsfiddle.net/TJuDu/でチェックアウトすると、私が行ったすべてのコードを見ることができます。問題は、:before 要素と :after 要素のスタックです。適切に配置されていますが、スタックが間違っています。.box div の背後にはっきりと表示されるはずの影が .layout div の背後にあります。z-index 値を削除すると、.box div の上に配置された影が表示されます。

問題は、私が別のページでこれとまったく同じように行ったところ、それが機能したことです。その後、突然、そのページと私が作成したこの例で機能しなくなりました。

4

1 に答える 1

7

この質問に対する 2 番目の回答は、実際には問題をよく説明しています。疑似要素のスタック順序を親要素の下に設定することは可能ですか?

あなたがする必要があるのは.box、次のようにラッパーとして使用することです：

<div class="box">
    <div class="pseudo-box">
        <h3>Awesome Box Title!</h3>
        <p class="box-text">This is a box!</p>
    </div>
</div>

次に、CSS について、以下を に適用します.box。

position:relative;
z-index: 2;

（または z-index に関連するものは何でも）残りのスタイルを に適用する必要があります。これには z-index.pseudo-boxは必要ありposition: relative;ません。

最後に、:beforeandはではなく:afterに関連付ける必要があります.pseudo-box.box

ここで動作することを確認してください：http://jsfiddle.net/cchana/TJuDu/1/

于 2012-06-22T08:31:42.587 に答える