0

<div>他の5つを包むコンテナがあります<div>。コンテナdivにプロパティを適用したいbox-shadow: insetので、そのコンテナ内のすべての要素がその下にあり、影がそれらの「上」にあるように見えます。

問題は、<div>コンテナ内の要素が上に表示され、影が隠れているように見えることです。コンテナをテストして、コンテナ内のdivのいずれかを削除することにより<div>、効果が適切に適用されていることを確認しました。box-shadowまた、z-indexどの要素が何の上にあるかを調整するために、すべての要素のを調整してみました。

現在持っているHTML構造を使用してこの効果を達成できますか？コンテナの上に配置されたdivに頼ることで、position:absoluteこの効果を生み出すことができますか？

例を参照してください-http://jsfiddle.net/mDcKz/

どうもありがとうSO

4

3 に答える 3

1

はい、これを試してください：

.container {
position:absolute; display:block;
margin:0px;
padding:0px;
height:100%; width:100%;
box-shadow:inset 0 0 20px #000000;
background:none;
z-index:10 !important;
pointer-events:none;
}
于 2013-01-23T08:58:10.663 に答える
0

このコードを試してください

.container {
position:absolute; display:block;
margin:0px;
padding:0px;
height:100%; width:100%;
box-shadow:inset 0 0 20px #000000;
background:none;
z-index:10 !important;
} 
.subcontainer {position:absolute; display:block;z-index:5 !important;height:100%;     width:100%;}

<div class="container">

<div class="clear"></div>
</div>
<div class="subcontainer">
<div class="divider red"></div>
<div class="divider yellow"></div>
<div class="divider green"></div>
<div class="divider orange"></div>
<div class="divider gray"></div>
</div>
于 2013-01-22T16:52:16.087 に答える
0

私はコンテナにボックスシャドウを適用する同様の問題に直面していました、これは私のために働いた解決策です：-

HTMLコード

<div class="graph">

    <section>
        <div>
            <span class="danger" style="height: 29.33333333333333%;">Failed</span>
        </div>

        <div>
            <span class="safe" style="height: 70.66666666666667%;">Sent</span>
        </div>
    </section>

</div> <!-- END GRAPH -->

CSSコード

    .graph {
width: 280px;
height: 300px;
position: aboslute;
box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
z-index: 999;
}

.graph section {
width: 100%;
height: 100%;
display: table;
text-align: center;
position: relative;
z-index: -1;
background: orange;
margin: 0;
padding: 0;
}

.graph section div {
display: table-row;
position: relative;
}

.graph section span {
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 1;
}

これにより、ボックスシャドウが子要素をオーバーレイし、子要素にもアクセスできます。

于 2014-01-25T08:48:06.650 に答える