css - box shadow covering all contained divs using absolute positioning

Question

Here's a reference http://cssdesk.com/rHWcz

What I'm trying to do is have one of the div's contained be under the box shadow. I think using absolute positioning might be giving me some problems, but it has to be absolute positioned. It doesn't matter which one, but one of the box div's cannot lay on top of the box shadow. Any ideas?

It is caused by the child divs background color.. If you set them to `RGBA` instead with a lower alpha, it would go through.. also.. try look at this question: http://stackoverflow.com/questions/7870499/how-do-i-make-sure-child-elements-do-not-cover-up-inset-shadow — Corfitz., Apr 24 '13 at 17:57

Troy Alford · Accepted Answer · 2013-04-24T18:52:54.650

There are a few problems which you might want to resolve in order to fix this. The first is that your HTML is ambiguous / poorly formed:

<div class="out"><div class="left">
</div>
<div class="right"></div>

My assumption is that what you really mean is:

<div class="out">
 <div class="left"></div>
 <div class="right"></div>
</div>

(You were missing a closing </div>)

With this fixed, the easiest solution is actually to pull the shadow out of the underlying tag (the .out div), and instead create the shadow as an overlay.

Example:

<div class="out">
 <div class="left"></div>
 <div class="right"></div>
 <div class="shadow"></div>
</div>

With this done, you can easily place the .left and .right <div> elements where you want them, and then force the .shadow div to appear on top.

Consider the following CSS (I also normalized your CSS some to reduce repetition):

.out, .shadow {
  height: 600px; width: 600px;
}
.out {
  background-color: AliceBlue;
  position: relative;
}
.shadow {
  background: transparent;
  -webkit-box-shadow: inset 0px 0px 5px 5px ;
  box-shadow: inset 0px 0px 5px 5px;
  position: absolute; top: 0; left: 0;
}
.left, .right {
  height: 100px; width: 100px;
  bottom: 0;
  position: absolute;
}
.left {
  background-color: green;
  left: 0; 
}
.right {
  background-color: red;
  right: 0;
}

Because the .shadow div appears last, you don't need any special z-order in order to get it to appear on-top.

Here is a working cssdesk to demonstrate it in-action.

Edit:

As mentioned in the comments - the original question actually asks for only one of the two boxes to appear under the box-shadow. If you want one of them to appear above it, simply move that box's HTML tag so that it appears after the .shadow <div>, like this:

<div class="out">
 <div class="left"></div>
 <div class="shadow"></div>
 <div class="right"></div>
</div>

This will cause the .right box (the red one) to appear above the shadow, rather than below - without the need for any z-index nastiness.

I have updated the cssdesk example to show this version instead.

bingo, that's what i was going for. and yes, i forgot to close the div, thanks for noticing. keen eye, sir! nice job on everything, i have a better understanding of things now! — Ghost Echo, Apr 24 '13 at 18:24
actually this isn't quite what I wanted, but it will work. I only wanted to have one of the boxes under the drop shadow, it does say that in my question. I guess I can just z-index it up for now... — Ghost Echo, Apr 24 '13 at 18:30
All you need to do is move one of the boxes *after* the `.shadow` — Troy Alford, Apr 24 '13 at 18:46
awesome. i was thinking it was something like that. The original missing closing div actually was supposed to go on the very end of everything. Thank you so much. — Ghost Echo, Apr 24 '13 at 18:58
Your cssdesk link is defunct. Can you include it as a snippet here instead? — MSC, Apr 09 '22 at 11:19

score 1 · Answer 2 · answered Apr 24 '13 at 17:51

1

.left, .right {
  z-index: -1;
}

You must remove the background color to .out, though. There is no way to place an element between anothers box shadow and background.

answered Apr 24 '13 at 17:51

bookcasey

39,223
13
77
94

what about somehow using multiple backgrounds within the same div? – Ghost Echo Apr 24 '13 at 17:53
You'd run into a problem with interacting with content that has a z-index:-1. That effectively puts it below/behind the body. – AndrewHipp Apr 24 '13 at 18:01
z-index: -1 isn't good solution if user2118228 add z-index to parent element, ofcourse if he have to add. – Bartek Bielawa Apr 24 '13 at 18:01

score 1 · Answer 3 · answered Apr 24 '13 at 17:58

Another alternative is to create another element the height and width of the container and position it to the top left with absolute.

You can see an example here

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

You'd run into a problem with not being able to click on any content below the positioned element with the box-shadow. A way around this would be to hide it when the user hovers.

score 0 · Answer 4 · answered Apr 24 '13 at 18:06

HTML

<div class="wrapper">
    <div class="out"></div>  
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

.wrapper {
    position: relative;
    width:600px;
    height:600px
}
.out {
    width:600px;
    height:600px;
    background-color:aliceblue;
    position:relative;
    -webkit-box-shadow: inset 0px 0px 5px 5px ;
    box-shadow: inset 0px 0px 5px 5px;
    z-index: 2;
}  
.left {
    width:100px;
    height:100px;
    background-color:green;left:0; bottom:0;
    position:absolute;
    z-index: 1;
}
.right {
      width:100px;
      height:100px;
      background-color:red;right:0; bottom:0;
      position:absolute;
      z-index:4;
}

DEMO

http://jsfiddle.net/sqJyw/4/

EXPLANATION

I add div which wrapped your content, manipulate z-index of Your samll div to show or hide them.

Nice solution, though your CSS is a little repetitive and it changes the parent/child relationship, which somewhat defeats the purpose of showing the box shadow "over the divs contained" — Troy Alford, Apr 24 '13 at 18:09
for this one the green box (left) isn't showing up...i'm using firefox — Ghost Echo, Apr 24 '13 at 18:16

css - box shadow covering all contained divs using absolute positioning

4 Answers4

Linked