CODEWITHSUNDEEP
css
Pierre Olivier Tran
Pierre Olivier Tran

Reputation: 1879

Display shadow-box over contained elements

I'd like to display a list of elements inside of a container div. This container div has an inner shadow box. Unfortunately, the shadow box goes underneath the contained elements, as you can see here

enter image description here

Now obviously, this is both illogical and non-esthetic. I dug around, and someone gave this solution. The problem is, I need to be able to scroll inside of this container, for the contained divs will most likely overflow.

Is there a way to display this shadow over the contained divs ?

Upvotes: 1

Views: 75

Answers (1)

Znaneswar
Znaneswar

Reputation: 3387

Since you have not provided any source code, some better way to achive this is

.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>

Upvotes: 2

Related Questions