含まれている要素の上にシャドウボックスを表示

Question

私はコンテナdivの中に要素のリストを表示したいと思います。このコンテナdivには、内側のシャドウボックスがあります。残念ながら、あなたはここに

見ることができるようにシャドーボックスは、含まれる要素の下に行く今、明らかに、これは非論理的かつ非審美の両方です。私は周りを掘って、誰かがthis solutionを与えた。問題は、このコンテナの内部をスクロールできるようにする必要があります。これは、含まれているdivがオーバーフローする可能性が高いためです。

含まれているdivにこの影を表示する方法はありますか？

Answer 1

あなたが任意のソースコードを提供していないので、これをachiveするためにいくつかのより良い方法は

.parent { 
 
    box-shadow : inset 0 0 5px 0 black; 
 
    height:200px; 
 
    position :relative; 
 
    overflow-y: scroll; 
 
} 
 

 
.content { 
 
    background : rgba(0,0,0,0.2); 
 
    height:1000px; 
 
    width:200px; 
 
    margin:auto; 
 
}

<div class="parent"> 
 
    foo 
 
    <div class="content">bar</div> 
 
</div>