CSS Box shadow disappears

Question

I am trying to implement effect number 2 as seen at the following site: http://cssdeck.com/labs/different-css3-box-shadows-effects So far, I am able to do this porperly, but when I add any more html content to the page, the effect disappears. Here is a sample fiddle with what I have so far: http://jsfiddle.net/aHrB7/ Part of the HTML: ``` ``` Here is the CSS I am using for that: ``` .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .header { position: relative; width: 100%; background: #fff; padding-top: 10px; padding-bottom: 10px; } .header:before, .header:after { z-index:-1; position: absolute; display:table; conte…

Accepted Answer

As far as I understand, it's because `.header` doesn't generate its own stacking context (since its z-index is `auto`), so `z-index: 1` for pseudo-elements that make shadow means that they are stacked behind the `body`. If `.header` is the only content of `body`, `body` just is as tall as `.header` and doesn't completely hide the shadows, but when it becomes taller, it does.

To prevent `body` from hiding the shadow with its background, you can do the following trick: make its background transparent and set the main background only to the root element.

```
html {
    background: #f9f8f8;
}

body {
    background: transparent;
}
```

The result you can see in this fiddle.

CSS Box shadow disappears

Solution

Problem