Css - window shadow covering all contained divs using absolute positioning

Question

Here is the link http://cssdesk.com/rHWcz

What I'm trying to do is make one of the divs be under the shadow of the window. I think using absolute positioning may give me some problems, but it should be absolute. It doesn't matter which one, but one of the div's fields cannot lie over the shadow of the box. Any ideas?

Answer 1

There are several problems you can solve to fix this. Firstly, your HTML is ambiguous / poorly formed:

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

My guess is that you really mean:

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

( </div>)

- (.out div) .

:

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

.left .right <div>, , .shadow div .

CSS ( CSS, ):

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

.shadow div , z-order, .

cssdesk, .

Edit:

- , box-shadow. , , HTML- , .shadow <div>, :

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

, .right () , - - z-index .

cssdesk, .

Answer 2

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

.out. .

Answer 3

.

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

You would have a problem with the inability to click on any content below a positioned element using the shadow box. The way to this will be to hide it when the user hovers.

Answer 4

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 a div that completes your content, manipulates the z-index of your samll div to show or hide them.