CODEWITHSUNDEEP
css
RCNeil
RCNeil

Reputation: 8759

Inset Box-Shadow for Container DIV to overlay other block elements within

I have a container <div> that wraps around 5 other <div>s. I would like to apply a box-shadow: inset property to the container div, so it looks like all the elements within that container are beneath it and the shadow is 'on top' of them.

Problem is, it seems that the <div> elements within the container appear on top, and hide the shadow. I have tested the container <div> to ensure that the box-shadow effect is being applied properly by removing any one of the divs within it. I have also tried adjusting the z-index's of all of the elements in order to adjust what elements are on top of what.

Am I able to accomplish this effect using the HTML structure I have now? Would resorting to a position:absolute div positioned over the container be able to create this effect?

Please see example - http://jsfiddle.net/mDcKz/

Many thanks SO

Upvotes: 0

Views: 7957

Answers (3)

Raj
Raj

Reputation: 370

I was facing a similar issue applying box-shadow to a container, this is the solution that worked for me:-

HTML Code

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

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

With this the box-shadow overlays the child elements and the child element is accessible too.

Upvotes: 0

drasick
drasick

Reputation: 290

Yes try this:

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

Upvotes: 1

drasick
drasick

Reputation: 290

Try this code

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

Upvotes: 0

Related Questions