CSS3 коробчатая тень для перекрытия подобных див

Question

Я пытаюсь добиться этого эффекта с помощью CSS3:

HTML-код чисто что-то вроде

... 
<header> 
    ... 
</header> 

<div id="wrapper"> 
    ... 
</div> 
... 

и КСС , на данный момент, что-то вроде

header { 
    display: block; 
    width: 900px; 
    height: 230px; 
    margin: 0 auto; 
    border: 1px solid #211C18; 
    ... 
    box-shadow: 2px 4px 20px #005377; 
    -moz-box-shadow: 2px 4px 20px #005377; 
    -webkit-box-shadow: 2px 4px 20px #005377; 
} 

#wrapper { 
    width: 820px;  
    margin: 0 auto; 
    ... 
    border-right: 1px solid #211C18; 
    border-bottom: 1px solid #211C18; 
    border-left: 1px solid #211C18; 
    ... 
    box-shadow: 2px 4px 20px #005377; 
    -moz-box-shadow: 2px 4px 20px #005377; 
    -webkit-box-shadow: 2px 4px 20px #005377; 
} 

Для того, чтобы получить желаемый результат, I необходимо:

1. Скрыть верхнюю тень главного DIV (нет проблем с этим)
2. Доведите нижнюю тень Header в передней части основного DIV, а не сзади, как это прямо сейчас.

Я читал много о коробке тени, и я не нашел решение, которое мне действительно нравится ... Любая идея?

Answer 1

Этот jsfiddle делает то, что вы хотите.

Способ работы с основным элементом #wrap, который центрирует содержимое и создает координатную карту для абсолютно расположенного элемента #main. Он делает это из-за своей позиции: относительное правило CSS. Вы в конечном итоге с помощью следующей разметки:

<div id="wrap"> 
    <header></header> 
    <div id="main"></div> 
</div> 

header The затем помещается внутри этого и с учетом позиции: относительная и Z-индекс, чтобы установить его укладки над #main контейнера.

Окончательно #main абсолютно расположен ниже header. CSS выглядит так:

/* centre content and create coordinate map for absolutely positioned #main */ 
#wrap { 
    width: 300px; 
    margin: 20px auto; 
    position: relative; 
} 

header, #main { 
    background: #fff; 

    /* rounded corners */ 
    border: 1px solid #211C18; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;  

    /* dropshadows */ 
    box-shadow: 2px 4px 20px #005377; 
    -moz-box-shadow: 2px 4px 20px #005377; 
    -webkit-box-shadow: 2px 4px 20px #005377; 
} 

header { 
    display: block; 
    width: 300px; 
    height: 50px; 

    /* stack above the #main container */ 
    position: relative; 
    z-index: 2; 
} 

#main { 
    width: 200px; 
    height: 70px; 

    /* stack below the header and underlap it...if that's even a word */ 
    position: absolute; 
    z-index: 1; 
    top: 40px; 
    left: 50px; 
} 

Answer 2

Мне просто посчастливилось использовать относительное позиционирование.

Например.

1-й дивизор имеет тень коробки и нижний край. 2-й div подскакивает под тенью.

#firstdiv {width: 960px; box-shadow: 5px 5px 5px #ccc; margin-bottom: 10px;} 
#seconddiv {width: 960px; position: relative; top: -10px;} 

Это не лучшее решение, но оно работает для меня.

Answer 3

установка позиции «относительная» уже решит проблему!