I'm little surprised with the behavior of box-shadow that if the container is positioned relatively the shadow goes to below but if it isn't positioned (i.e. static position) the shadow appears to front.

```
#main{
  position: relative; /*sets shadow to below the heading*/
}

```

Unsetting relative position sets the shadow to front of the heading:

```
#main{
  /*position: relative; */
}

```

![enter image description here](https://i.stack.imgur.com/7DM0S.jpg)

[demo](http://jsfiddle.net/fsfg32en/)
=====================================

Can anyone tell me about this change?