CSS - коробка тени, охватывающая все содержащиеся дивы, используя абсолютное позиционирование

Question

Вот это ссылка http://cssdesk.com/rHWcz

То, что я пытаюсь сделать, это один из Див, содержащихся под коробкой тени. Я думаю, что использование абсолютного позиционирования может дать мне некоторые проблемы, но оно должно быть абсолютным. Не имеет значения, какой из них, но один из полей div не может лежать поверх тени коробки. Любые идеи?

Answer 1

Есть несколько проблем, которые вы можете решить, чтобы исправить это. Первое, что ваш HTML неоднозначен/плохо сформированы:

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

Мое предположение, что то, что вы на самом деле имею в виду:

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

(Вы пропускали закрытие </div>)

С этим исправлено, самое простое решение - на самом деле вытащить тень из основного тега (.outdiv) и вместо этого создать тень как наложения.

Пример:

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

С это сделать, вы можете легко поместить .left и .right<div> элементов, где вы хотите их, а затем заставить .shadowdiv появляться на верхних.

Рассмотрим следующий 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; 
} 

Поскольку .shadowdiv появляется последнее, вам не нужно каких-либо специальных z-order для того, чтобы получить его появляются сверху.

Here is a working 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

Другой альтернативой является создание другого элемента высоты и ширины контейнера и положение его в верхнем левом углу с абсолютным.

Вы можете увидеть example here

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

Вы бы столкнулись с проблемой, с не в состоянии нажать на любое содержание ниже позиционируемый элемент с коробкой-тени. Путь вокруг этого будет заключаться в том, чтобы скрыть его, когда пользователь зависает.

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/ 

ОБЪЯСНЕНИЕ

Я добавляю div, который завернул ваш контент, манипулирует z-index вашего samll div, чтобы показать или скрыть их.